HTML DOM系列教材（四）- 样式

HTML DOM系列教材（三）- HTML DOM 获取元素节点

HTML DOM系列教材（五）- 事件

工具版本兼容问题

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

纠

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

步骤 1 :

隐藏和显示

edit 顶折

纠问

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

改变背景色

edit 顶折

纠问

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

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

步骤 3 :

练习-表格斑马线

edit 顶折

纠问

姿势不对,事倍功半! 点击查看做练习的正确姿势

对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 :

答案-表格斑马线

edit 顶折

纠问

在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多

查看本答案会花费3个积分，您目前总共有点积分。查看相同答案不会花费额外积分。积分增加办法

账号未激活账号未激活，功能受限。请点击激活

运行效果

代码行数较多，请点击查看

<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 全屏编辑，再次点击恢复

渲染中渲染完成

效果

HTML DOM系列教材（三）- HTML DOM 获取元素节点

HTML DOM系列教材（五）- 事件

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

问答区域

2024-07-26 完全使用 js 完成表格斑马线练习

虚心求学

关于前端部分-HTML DOM-样式的提问

完全使用 js ，不提前设置任何CSS样式（包括 style 标签和 style 属性均不设置样式）; 主要使用 r1.style = "border-bottom : 3px solid #bbb;"; 这样的形式。但是这种方法的缺点是，需要在对应元素的属性处设置一个style 属性（可不赋值，或赋空值）。缺点2，会对上一次设置的样式设置全部覆盖。

<table style="">
  <tr id = "r1" style="">
     <td class = "col">id</td>   <td class = "col">名称</td>   <td class = "col">血量</td>     <td class = "col">伤害</td> 
  </tr>
<tr id = "r2" style=""> <td>1</td>  <td>gareen</td>             <td>520</td>        <td>12</td>
  </tr>
<tr id = "r3" style=""> <td>2</td>  <td>teemo</td>              <td>521</td>        <td>34</td>
  </tr>
<tr id = "r4" style=""> <td>3</td>  <td>annie</td>              <td>013</td>        <td>56</td>
  </tr>
<tr id = "r5" style=""> <td>4</td>  <td>deadborther</td>    <td>014</td>        <td>78</td>
  </tr>
 </table>
 
<script>
  setStyle();
  function get(id){
        return document.getElementById(id);
  }
  function setStyle(){
        var table = document.getElementsByTagName('table')[0];
        var r1 = get('r1');
        var r2 = get('r2');
        var r4 = get('r4');
        var tds = document.getElementsByClassName('col');
        table.attributes["style"].nodeValue = "  width : 100%;"+
"  height: 200px;"+
"  text-align : center;"+
"  border-collapse : collapse;"+
"  background-color:#fafafa;"+
"  border-bottom:3px solid #bbb;";
        for(const td of tds){
                td.style.width = "25%";
        }
    r1.style = "border-bottom : 3px solid #bbb;";
     r4.style = r2.style = "background-color:#eee";
}
</script>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2021-03-28 斑马线答案

镜子里的笑脸

关于前端部分-HTML DOM-样式 -答案-表格斑马线的提问

注意把<script>放body最下面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格斑马线</title>
    <style>
        table{
            width:800px;
            text-align: center;
            margin: auto;
            border-collapse: collapse;
        }
        td{
            width:200px;
            border-bottom-style:solid;
            border-bottom-color: #f5f5f5;
            padding: 10px 0px;
        }
        th{
            width:200px;
            border-bottom-style:solid;
            border-bottom-color: lightgray;
            padding: 10px 0px;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <th>id</td>
        <th>名称</td>
        <th>血量</td>
        <th>伤害</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 tr=document.getElementsByTagName("tr");
    for(var i=1;i<tr.length;i=i+2)
    {
        tr[i].style.backgroundColor="#f2f2f2";
    }
</script>
</body>
</html>

2 个答案

起个名
答案时间：2024-03-12

111

good

tgc123456
答案时间：2022-11-28

使用JQuery的奇偶数获取元素

代码超过 5行，点击查看

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2021-01-27 JavaScript斑马线打卡

AzxBldodo

关于前端部分-HTML DOM-样式的提问

完成打卡

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScriptTest</title>
  <style>
    .tb1{
      border-collapse: collapse;
      align-content: center;
    }
    .tb1 tr{
      border-bottom: 1px solid #999999;
    }
    .tb1 tr td{
      width: 130px;
      height: 30px;
      text-align: center;
    }
  </style>
</head>
<!--對CSS中的練習-表格斑馬線，使用javascript來實現-->
<body>
<table class="tb1">
  <tr>
  <td>id</td>
  <td>名称</td>
  <td>血量</td>
  <td>伤害</td>
  </tr>
  <tr>
    <td>1</td>
    <td>green</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>98</td>
  </tr>
</table>
<script>
  var trs = document.getElementsByTagName("tr");
  for (let i = 0; i < trs.length; i++) {
    if(i%2==0){
      trs[i].style.background="#FFFFFF";
    } else{
      trs[i].style.background="#F8F8F8";
    }
  }
</script>
</body>
</html>

2 个答案

CharlieLong
答案时间：2023-11-07

本章节几个练习的答案

代码超过 5行，点击查看

<!DOCTYPE html>
<html lang="en" xmlns="" xmlns="">
<!--练习1：验证账号是否已经存在-->
<!--练习2：通过src\属性节点切换不同的图片-->
<!--练习3：判断输入框里的值，是否是整数-->
<!--练习4:使用javascript来实现表格斑马线-->
<head>
    <meta charset="UTF-8">
    <title>DOM练习</title>
</head>
<body>
<style>
td{
    width: 25%;
}
table{
    width: 80%;
    table-layout: fixed;
    border-collapse: collapse;
}
</style>
<h3 id="testh3">Practice1:<b>验证账号是否已经存在</b></h3>
<div id="testdiv">
    <label>
        <input type="text" id="countID">
    </label>
    <button onclick="checkCountisAvailable()">验证</button>
    <span id="return" style="color: blue"></span>
</div>
<h3>Practice2:通过src\属性节点切换不同的图片</h3>
<img id="picture" src="/src/frontEnd/CSS/practice/img_Heroes/6.jpg" alt="无法显示图片">
<div>
    <button onclick="switchPicturebyAttribute()">通过src属性切换图片</button>
    <button onclick="switchPicturebyNodes()">通过属性节点切换图片</button>
</div>
<h3>Practice3:判断输入框里的值，是否是整数</h3>
<label>
    <input type="text" id="inputCheck"  onkeyup="checkisInt()">
</label>
<span id="returnisInt"></span>

<h3>Practice4:使用javascript来实现表格斑马线</h3>
<table style="">
    <tr class="firstRow" >
        <td>id</td>
        <td>名称</td>
        <td>血量</td>
        <td>伤害</td>
    </tr>
    <tr class="oddRow" >
        <td>1</td>
        <td>gareen</td>
        <td>340</td>
        <td>58</td>
    </tr>
    <tr class="evenRow" >
        <td>2</td>
        <td>teemo</td>
        <td>320</td>
        <td>76</td>
    </tr>
    <tr class="oddRow" >
        <td>3</td>
        <td>annie</td>
        <td>380</td>
        <td>38</td>
    </tr>
    <tr class="evenRow">
        <td>4</td>
        <td>deadbrother</td>
        <td>400</td>
        <td>90</td>
    </tr>
</table>

<script>
    function checkCountisAvailable(){
        let countID=document.getElementById("countID").value;
        let characterAT1=countID.charAt(0).toLowerCase();
        if(characterAT1==="a"){
            document.getElementById("return").textContent="账号已经存在";
            document.getElementById("return").attributes["style"].nodeValue="color: red";
        }else if(characterAT1!=="a"&&characterAT1!==""){
            document.getElementById("return").textContent="账号可以使用";
            document.getElementById("return").attributes["style"].nodeValue="color: black";
        }
        else if(characterAT1===""){
            document.getElementById("return").textContent="请输入账号";
            document.getElementById("return").attributes["style"].nodeValue="color: red";
        }
    }
    function switchPicturebyAttribute(){
        let imgElement=document.getElementById("picture");
        imgElement.src="/src/frontEnd/CSS/practice/img_Heroes/8.jpg"
    }
    function switchPicturebyNodes(){
        let imgElement=document.getElementById("picture");
        imgElement.attributes["src"].nodeValue="/src/frontEnd/CSS/practice/img_Heroes/9.jpg"
    }
    function checkisInt(){
        let input=Number(document.getElementById("inputCheck").value);
        let returnisInt=document.getElementById("returnisInt")
        if(Number.isInteger(input)&&input!==0){
            returnisInt.textContent="是整数";
        }else if(!Number.isInteger(input)){
            returnisInt.textContent="请录入整数!";
        }else
            returnisInt.textContent="请输入";
    }
    //使用javascript来实现表格斑马线
    let firstRow=document.getElementsByClassName("firstRow");
    let oddRow=document.getElementsByClassName("oddRow");
    let evenRow=document.getElementsByClassName("evenRow");
    firstRow[0].style.backgroundColor="write";
    firstRow[0].style.borderBottomColor="4E4E4E";
    firstRow[0].style.borderBottomStyle="double";

    for(let i=0;i<oddRow.length;i++){
        oddRow[i].style.backgroundColor="rgb(248,248,248)";
        oddRow[i].style.borderBottomColor="C0BEBE";
        oddRow[i].style.borderBottomStyle="solid";
    }
    for(let i=0;i<evenRow.length;i++){
        evenRow[i].style.backgroundColor="rgb(255,255,255)";
        evenRow[i].style.borderBottomColor="C0BEBE";
        evenRow[i].style.borderBottomStyle="solid";
    }




</script>

</body>
</html>

54Mozu
答案时间：2022-12-13

代码超过 5行，点击查看

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2020-12-25 斑马线答案来鸟

hhhzt

关于前端部分-HTML DOM-样式的提问


<style>
table{
border-collapse:collapse;
width:90%;
}

  tr.head{
    border-bottom-width: 2px;
  }
tr{
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: lightgray;
height:35px;
}
 
td{
width:25%;
text-align:center;
}
 
</style>
<table>
   <tr class="head">
       <td>id</td>
       <td>名称</td>
       <td>血量</td>
       <td>伤害</td>
    </tr>
   <tr class="odd">
       <td>1</td>
       <td>gareen</td>
       <td>340</td>
       <td>58</td>
    </tr>
   <tr class="even">
       <td>2</td>
       <td>teemo</td>
       <td>320</td>
       <td>76</td>
    </tr>
   <tr class="odd">
       <td>3</td>
       <td>annie</td>
       <td>380</td>
       <td>38</td>
    </tr>
   <tr class="even">
       <td>4</td>
       <td>deadbrother</td>
       <td>400</td>
       <td>90</td>
    </tr>
</table>
<script>
	var odd = document.getElementsByClassName('odd')
	for(i in odd){odd[i].style.backgroundColor = '#f8f8f8';}
</script>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2020-05-17 斑马线

小原

关于前端部分-HTML DOM-样式的提问

//笨方法计算偶数 var count = 1;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            width: 900px;
            margin: 0 auto;
            /*边框合并*/
            border-collapse: collapse;
        }
        td{
            width: 225px;
            height: 40px;
            text-align: center;
            border-bottom: 1px solid rgb(211,211,211);
        }
        /*一不小心用css实现了这个功能*/
        /*tr:nth-of-type(even){*/
        /*    background: rgb(248,248,248);*/
        /*}*/
    </style>
</head>
<body>
<table>
    <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>
    //使用js实现偶数背景颜色
    var trs = document.getElementsByTagName("tr");
    //笨方法计算偶数
    var count = 1;
    for (var i=0; i<trs.length;i++){
        if (count % 2 == 0){
            trs[i].style.backgroundColor="rgb(248,248,248)";
            count++;
        }else {
            count++;
        }
    }
</script>
</body>
</html>

1 个答案

小原
答案时间：2020-05-17

// 我的理解为,因为是从0开始,所以偶数不是之前的偶数了,默认加了1

代码超过 5行，点击查看

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 9 条以前的提问，请点击查看

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于前端部分-HTML DOM-样式的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

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

上传截图