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公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2018-11-22 作业,用的table中间空了一点
加油鸭



请问是不是在这个格式中,所有的'-'都没有了,要变成后面的字母大写? 例如ccs中的border-top要变为borderTop才对
<table>
<tr id="d0">
            <td>id</td>
            <td>名称</td>
            <td>血量</td>
            <td>伤害</td>
        </tr>
        <tr id="d1">
            <td>1</td>
            <td>gareen</td>
            <td>340</td>
            <td>58</td>
        </tr>
        <tr id="d2">
            <td>2</td>
            <td>teemo</td>
            <td>320</td>
            <td>76</td>
        </tr>
        <tr id="d3">
            <td>3</td>
            <td>annie</td>
            <td>380</td>
            <td>38</td>
        </tr>
        <tr id="d4">
            <td>4</td>
            <td>deadbrother</td>
            <td>400</td>
            <td>90</td>
        </tr>
        <script>
            function p(s){
                document.write(s + "<br />");
            }
            var td1 = document.getElementsByTagName("td");
            for(i = 0; i < td1.length; i++){
                td1[i].style.width = "200px";
                td1[i].style.lineHeight = "30px";
                td1[i].style.textAlign = "center";
td1[i].style.borderBottom = "solid 1px black";
            }

            document.getElementById("d1").style.backgroundColor = "#f5f5f5";
            document.getElementById("d3").style.backgroundColor = "#f5f5f5";
        </script>

							






答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2018-10-28 答题
coolbgo



答题
<!DOCTYPE html>
<!--
	border-collapse:collapse;隐藏边框
-->
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="d0">
			<span>id</span>
			<span>名称</span>
			<span>血量</span>
			<span>伤害</span>
		</div>
		<div id="d1">
			<span>1</span>
			<span>gareen</span>
			<span>340</span>
			<span>58</span>
		</div>
		<div id="d2">
			<span>2</span>
			<span>teemo</span>
			<span>320</span>
			<span>76</span>
		</div>
		<div id="d3">
			<span>3</span>
			<span>annie</span>
			<span>380</span>
			<span>38</span>
		</div>
		<div id="d4">
			<span>4</span>
			<span>deadbrother</span>
			<span>400</span>
			<span>90</span>
		</div>
		<script>
			function p(s){
				document.write(s + "<br />");
			}
			var span1 = document.getElementsByTagName("span");
			for(i = 0; i < span1.length; i++){
				span1[i].style.display = "inline-block";
				span1[i].style.width = "200px";
				span1[i].style.textAlign = "center";
				span1[i].style.lineHeight = "30px";
			}
			var div0 = document.getElementsByTagName("div");
			for(i = 0; i < div0.length; i++){
				div0[i].style.borderBottom = "solid 1px #ccc";
				div0[i].style.display = "inline-block";
			}
			document.getElementById("d1").style.backgroundColor = "#f5f5f5";
			document.getElementById("d3").style.backgroundColor = "#f5f5f5";
		</script>
	</body>
</html>

							


1 个答案

鼎某人 答案时间:2018-11-28
我觉得在for循环里判断i是否是偶数就行了,不用给每个div设置不同的id




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2018-07-10 style.backgroundColor 这个属性显示没有




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

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 902680467
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图