javascript - 給js寫的盒子添加css樣式,css樣式?jīng)]起作用。
問題描述
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 id='box'>
<img src='http://www.aoyou183.cn/wenda/images/zhuyin.jpg'><section id='cover'></section>
</section></body></html>
如圖添加的盒子p,在<style><style>寫了沒效果
問題解答
回答1:原因在于:display: inline;
inline的含義就是,把元素當(dāng)成行內(nèi)元素,比如span標(biāo)簽,這樣的元素是不可以設(shè)置寬高的,因?yàn)樵O(shè)置了也不會(huì)生效。我猜你是想設(shè)置成inline-block的。
