js代码无效(span无法设置border)

最新推荐文章于 2024-05-06 21:51:47 发布

returnadsss

最新推荐文章于 2024-05-06 21:51:47 发布

阅读量592

点赞数

分类专栏： js+css+html 文章标签： javascript css 前端

本文链接：https://blog.csdn.net/returnadsss/article/details/122785576

版权

js+css+html 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

很多时候写css的时候都会出现一种无力感，别人的代码自己都能看懂，但是自己写的时候效果和自己脑子里的预想有些差距，这里面有各种各样的原因，刚好碰上一个，分享一下，就是没有注意到js语句顺序导致的，js语言里面除了函数的声明会提升，其它的语句都要按顺序执行，如果有语法明显错误报错还好，但如果不报错就可有的找了。
代码：

<!DOCTYPE html>
<html>

    <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        /*css reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/*end*/
        #hours{
            line-height:30px ;
        }
        .show{
            box-sizing:border-box;
            height:30px;
            background:#ccc;
            text-align:center；
            border-left: 1px solid red;
        }
    </style>
    </head>
    <body>
        <div id="hours"></div> 
        <div class="pic"></div>
    </body>
    <script>
        hline=document.getElementById("hours");
        hours='';
        hours+='<span class="show" style="width:50px;">小时</span>';
        hours+='<span class="show" style="width:60px">0</span';
        hline.innerHTML=hours;

    </script>

</html>

本意是创建两个元素，中间用边框线分隔，但边框怎么都出不来，搞得我有点怀疑人生，开始怀疑是不是span元素无法设置属性，或者是上下文有些什么复杂的用法，因为很多时候由于自己对css和浏览器样式了解不足会导致一些代码错误，整的十分紧张。搞了半天后发现是因为class属性最先被读取，而width又是在行内样式被定义的，导致border-left: 1px solid red;执行时宽度还没有被定义而导致代码无效，改后代码如下：

<!DOCTYPE html>
<html>

    <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        /*css reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/*end*/
        #hours{
            line-height:30px ;
        }
        .show{
            display: inline-block;
            box-sizing:border-box;
            height:30px;
            background:#ccc;
            text-align:center；

        }
    </style>
    </head>
    <body>
        <div id="hours"></div> 
        <div class="pic"></div>
    </body>
    <script>
        hline=document.getElementById("hours");
        hours='';
        hours+='<span class="show" style="width:50px;">小时</span>';
        hours+='<span class="show" style="width:60px;border-left: 1px solid red;">0</span';
        hline.innerHTML=hours;

    </script>

</html>

就可以了，希望这篇文章能为后人节省一点试错的时间，加油！