javascript - 给js写的盒子添加css样式，css样式没起作用。
本文介绍了javascript - 给js写的盒子添加css样式，css样式没起作用。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
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;}
div{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="";
odiv=document.getElementsByTagName("div");
for(var i=0;i<200;i++){
str+="<div></div>"
}
cover.innerHTML=str;
for(vari=0;i<199;i++){
odiv[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>
如图添加的盒子div，在<style><style>写了没效果
解决方案
原因在于：display: inline;
inline的含义就是，把元素当成行内元素，比如span标签，这样的元素是不可以设置宽高的，因为设置了也不会生效。我猜你是想设置成inline-block的。
这篇关于javascript - 给js写的盒子添加css样式，css样式没起作用。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
