您的位置：首页 > Web前端 > CSS

CSS选择器修改样式，及单独修改样式this.style.

2016-09-12 20:10 573 查看

css选择器：修改样式
实现开关灯效果

<html>
<head>
<title>开关灯效果</title>
<style type="text/css">
body
{
background: #FFF;
}
.day
{
background: #000;
}
.night
{
background: #FFF;
}
</style>
<script language="javascript" type="text/javascript">
function Switch() {
var btnSwitch = document.getElementById("btnSwitch");
var type = document.body.className;
if (type == "day") {
document.body.className = "night";
btnSwitch.value = "关灯";
} else {
document.body.className = "day";
btnSwitch.value = "开灯";
}
}
</script>
</head>
<body>
<input id="btnSwitch" type="button" value="关灯" onclick="Switch()" />
</body>
</html>

单独修改样式的属性使用“style.属性名”，css在javascript中操作的时候的属性名可能不同有“-”

Style.frontSize:front-size

Style.margainTop:margain-top

<input type="button" value="AAA" onclick="this.style.background='red'"/>

案例1：创建三个文本框，当光标离开文本框的时候，如果文本框为空，则将文本框背景色设置为红色，如果不为空，则设置为白色

<head>

<title></title>

<script type="text/javascript">

function initEvent()

{

var inputs=document.getElementsByTagName("input");

//遍历所以input控件，添加onblur响应函数

for(var i=0;i<inputs.length;i++)

{

var input=inputs[i];

input.onblur=inputOnblur;//注意：为input控件的onblur事件绑定inputOnblur响应函数，而不是调用某个函数

}



//失去焦点时候进行数据检查

function inputOnblur()

{

//inputOnblur是onblur的响应函数，而不是被响应函数调用的函数，所以可以用this来取得发生事件控件的对象

if(this.value.length<=0)//检查文本框中文字长度，如果<=0，则文本框为空

{

this.style.background="red";

}

else

{

this.style.background="white";

}

}

}





</script>

</head>

<body onload="initEvent()">

<input id="Text1" type="text" />

<input id="Text2" type="text" />

<input id="Text3" type="text" />

<input id="Text4" type="text" />

<input id="Text5" type="text" />

</body>

</html>

案例2：评分控件：

<head>

<title>无标题页</title>

<script type="text/javascript">

function indexOf(arr,element)
{ for(var i=0;i<arr.length;i++)
{
if(arr[i]==element)
{
return i;
}

}
return -1;
}

function initEvent()
{var tableRating=document.getElementById("tableRating");
var tds=tableRating.getElementsByTagName("td");
for(var i=0;i<tds.length;i++)
{
var td=tds[i];
td.onclick=TdOnClick;
td.style.cursor="pointer";
}

}

function TdOnClick()
{
var tableRating=document.getElementById("tableRating");
var tds=tableRating.getElementsByTagName("td");
var index=indexOf(tds,this);

for(var i=0;i<=index;i++)
{
var td=tds[i];
td.style.background="red";
}

for(var i=index+1;i<tds.length;i++)
{
var td=tds[i];
td.style.background="white";
}

}

</script>

</head>

<body onload="initEvent()">

<table id="tableRating" >

<tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr>

</table>

</body>

</html>

版本2：

是只有一个indexof（）函数，一个init（）函数在页面加载完成之后调用onload里，其中init函数里为每个td添加onmouseover事件

解惑：

为什么有的需要传this有的不需要？

<body>

<input type="button" value="click" onclick="alert(event.srcElement.value)"/>

<input type="button" value="click2" onclick="alert(this.value)"/>

<input type="button" value="click3" onclick="btnClick3()"/>

<input type="button" value="click4" onclick="btnClick4(this)"/>

<input type="button" value="click5" onclick="btnClick5()"/>

<input type="button" value="click6" id="btn6"/>

<script>

btnClick3(){alert(this.value);}//在事件响应函数调用的函数里，不能通过this来获得事件对象

btnClick4(btn){alert(btn.value);}//在事件响应函数中，将this传过来就可

btnClick5(){alert(event.srcElement.value);}

btnClick6(){alert(this.value);}

var btn6=document.getElementById("btn6");

btn6.onclick=btnClick6;

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航