how2j.cn


工具版本兼容问题
一个元素节点的style属性即对应的css


步骤 1 : 隐藏和显示   
步骤 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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
通过给元素的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 :

练习-表格斑马线

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个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
查看本答案会花费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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


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


问答区域    
2021-03-28 斑马线答案
镜子里的笑脸




注意把<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>

							





回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2021-01-27 JavaScript斑马线打卡
AzxBldodo




完成打卡
<!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>

							





回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2020-12-25 斑马线 答案来鸟
2020-05-17 斑马线
2020-04-19 斑马线


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

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-HTML DOM-样式 的提问

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

上传截图