|
|
|
|
步骤 2 : 改变背景色 步骤 3 : 练习-表格斑马线 步骤 4 : 答案-表格斑马线
通过给元素的style.display 赋值，改变显示还是隐藏
<button onclick="hide()">隐藏div</button>
<button onclick="show()">显示div</button>
<br>
<br>
<div id="d">
这是一个div
</div>
<script>
function hide(){
var d = document.getElementById("d");
d.style.display="none";
}
function show(){
var d = document.getElementById("d");
d.style.display="block";
}
</script>
通过给元素的style.backgroundColor 赋值，修改样式
你也许注意到了style.backgroundColor 这里的backgroundColor和css中的背景色background-color 是有所不同的 换句话说，通过DOM的style去修改样式，需要重新记忆另一套样式名称，这是很累赘的事情。 最好能够通过CSS的属性名，直接就进行修改了。比如通过这样的方式： d1.css("background-color","green"); 这样就仅仅需要使用CSS原本的属性名即可了。 Javascript并不提供这样的解决方案，但是到了JQuery就提供了这样的解决方案,请参考 通过JQuery设置CSS <div id="d1" style="background-color:pink">Hello HTML DOM</div>
<button onclick="change()">改变div的背景色</button>
<script>
function change(){
var d1 = document.getElementById("d1");
d1.style.backgroundColor="green";
}
</script>
<div id="d1" style="background-color:pink">Hello HTML DOM</div>
<button onclick="change()">改变div的背景色</button>
<script>
function change(){
var d1 = document.getElementById("d1");
d1.style.backgroundColor="green";
}
</script>
对CSS中的练习-表格斑马线，使用javascript来实现
<style>
table{
border-collapse:collapse;
width:90%;
}
tr{
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: lightgray;
height:35px;
}
td{
width:25%;
text-align:center;
}
</style>
<table id="t">
<tr >
<td>id</td>
<td>名称</td>
<td>血量</td>
<td>伤害</td>
</tr>
<tr >
<td>1</td>
<td>gareen</td>
<td>340</td>
<td>58</td>
</tr>
<tr >
<td>2</td>
<td>teemo</td>
<td>320</td>
<td>76</td>
</tr>
<tr >
<td>3</td>
<td>annie</td>
<td>380</td>
<td>38</td>
</tr>
<tr >
<td>4</td>
<td>deadbrother</td>
<td>400</td>
<td>90</td>
</tr>
</table>
<script>
var trs = document.getElementsByTagName("tr");
for(i=0;i<trs.length;i++){
if(1==i%2)
trs[i].style.backgroundColor='#f8f8f8';
}
</script>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
Or
姿势不对,事倍功半!