让用户自由控制html页面大段文字的行间距和背景颜色的方法
让用户自由控制html页面大段文字的行间距和背景颜色的方法
人性化小技巧：(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>