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

答案-表格斑马线

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


问答区域    
2020-05-17 斑马线
小原




//笨方法计算偶数 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



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





2020-04-19 斑马线
卢本伟nb




gg
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div {
            width: 600px;
            height: 500px;
            margin: 0 auto;
        }

        .div table tr td {
            width: 100px;
        }
    </style>
</head>

<body>
    <div class="div">
        <table cellspacing="0" width="400px" height="300px">
            <tr>
                <td>id</td>
                <td>name</td>
                <td>value</td>
                <td>damage</td>
            </tr>
            <tr>
                <td>1</td>
                <td>gailun</td>
                <td>500</td>
                <td>100</td>
            </tr>
            <tr>
                <td>2</td>
                <td>timo</td>
                <td>100</td>
                <td>140</td>
            </tr>
            <tr>
                <td>3</td>
                <td>yasuo</td>
                <td>100</td>
                <td>200</td>
            </tr>
            <tr>
                <td>4</td>
                <td>shitouren</td>
                <td>500</td>
                <td>20</td>
            </tr>
        </table>
    </div>
    <script>
        var row = document.querySelectorAll('table tr')
        var cols = document.querySelectorAll('td')
        console.log(row);
        console.log(cols);
        for (var i = 1; i < row.length; i++) {
            if (i % 2 == 0) {
                console.log("22");
                row[i].style.backgroundColor = "#eee"
            }
        }
        for (var j = 0; j < cols.length; j++) {
            cols[j].style.borderBottom = "2px solid #ccc"
        }
    </script>
</body>

</html>

							





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





2020-04-17 我的答案
2020-03-12 完成
2020-03-08 d1.css("background-color","green");怎么用了没有用


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

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

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

上传截图