how2j.cn

一个元素节点的style属性即对应的css

步骤 1 : 隐藏和显示   
步骤 2 : 改变背景色   
步骤 3 : 练习-表格斑马线   
步骤 4 : 答案-表格斑马线   

步骤 1 :

隐藏和显示

通过给元素的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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 2 :

改变背景色

通过给元素的style.backgroundColor 赋值,修改样式
你也许注意到了style.backgroundColor 这里的backgroundColorcss中的背景色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>



源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 3 :

练习-表格斑马线

Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
对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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 4 :

答案-表格斑马线

在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
运行效果
<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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


提问之前请登陆
关于 前端基础-HTML DOM-样式 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 389538688
站长会在每个工作日早上尽量回答提问(如果有漏掉没有回答的,请进群提醒一下)
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
站长是玻璃心,提问的时候请语气温柔些 kiss~
截止2017-5-19日累计提问 1638个,站长回答了 1546个
截止2017-8-15日累计提问 2788个,站长回答了 2544个

上传截图