小技巧:(javascript)如何让用户自由控制html页面大段文字的行间距和背景颜色

王朝java/jsp·作者佚名  2006-01-09
窄屏简体版  字體: |||超大  

人性化小技巧:(javascript)如何让用户自由控制html页面大段文字的行间距和背景颜色:

示例:

http://www.universecommerce.com/newtower/new.htm

行间距:

<script> var hjj=22; </script>

<a href="javascript:;" onClick="hjj++;document.body.style.lineHeight=hjj+'px';">行间距+</a><a href="javascript:;" onClick="hjj--;document.body.style.lineHeight=hjj+'px';">行间距-</a><br>

背景色:

在<style type="text/css">中如果定义了body {的背景颜色,可能导致无法鼠标获取颜色getColorTest()

<script>

//获取颜色测试, 背景颜色

var isOpen = false;

var vBlue = 0;

function getColorTest()

{

var a,b,c,x,y;

o = document.all('nouseIsGetColor');

if( null == o )

return;

if( false == o.checked )

{

if( isOpen )

{

//document.bgColor = "#ffffff";

isOpen = false;

}

return;

}

document.body.background="";

x = event.x; y = event.y;

//

x = Math.round( 256 * x / (screen.availWidth-90) );

y = Math.round( 256 * y / (screen.availHeight-120) );

//

a = x; // a = ( x - y/2 );

b = y; // b = ( y/2 ) ;

c = vBlue; //c = ( 0.7 * y );

vBlue += 10 * Math.random();

a = a % 255; b = b % 255; c = c % 255;

//

//a = x % 255; b = y % 255; c = ( x+y ) % 255;

//

a = Math.round(a); b = Math.round(b); c = Math.round(c);

if( null != document.bgColor )

document.bgColor = "rgb("+a+","+b+","+c+")";

window.status = 'r=' + a + ' g=' + b + ' b=' + c ;

o = document.all('nouseColorTest');

if( null != o )

{

o.value = document.bgColor;

o.value = o.value.substr(1,o.value.length);

isOpen = true;

}

}

</script>

<body onMouseMove="javascript:getColorTest();">

自由改变背景颜色

<input name="nouseIsGetColor" type="checkbox" value="checkbox" class="cb" title="鼠标随处移动,颜色确定后按空格键生效">

背景颜色值

<input name="nouseColorTest" type="text" size="8" maxlength="250" onBlur="if(this.value!='') document.bgColor=this.value;" title="可以人工输入值,焦点离开后,颜色值生效">

按空格确定

<a href="javascript:;" onClick="location.reload();">还原</a>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航