简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 為js寫的盒子添加css樣式，css樣式沒起作用。
巴扎黑
巴扎黑 2017-07-05 11:04:47
0
1
1059

js中寫了些盒子，在css中為它添加些樣式。但是沒起到作用。代碼;
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Title</title>
<style>
    *{margin: 0;padding:0;}
    .box{width:500px;height:800px;position: relative;display: block;overflow: hidden;}
    img{width: 500px;height:900px;}
    #cover{position: absolute;height:800px;width:505px;top:0;left:0;display:block;background: transparent;}
    p{display: inline;height:50px;width:50px;border:1px solid #eee;background: #eee;margin: 0;}
</style>
<script>
    window.onload=function () {
        var cover=document.getElementById("cover");
        str="";
        op=document.getElementsByTagName("p");
        for(var i=0;i<200;i++){
            str+="<p></p>"
        }
        cover.innerHTML=str;
        for(vari=0;i<199;i++){
            op[i].onmouseover=function () {
                this.style.background="transparent";
            }
        }
    }
</script>

</head>
<body>
<section class="box" id="box">

<img src="./images/zhuyin.jpg">
<section id="cover"></section>

</section>
</body>
</html>

如圖添加的盒子p，在<style><style>寫了沒效果

巴扎黑
巴扎黑

全部回覆(1)
Peter_Zhu
Peter_Zhu2017-07-05 11:06:47 1樓

原因在於：display: inline;

inline的意思就是，把元素當成行內元素，例如span標籤，這樣的元素是不可以設定寬高的，因為設定了也不會生效。我猜你是想設定成inline-block的。

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！