Question

我有这段代码在外部div（outerDiv）内部创建了两个div（leftDiv和rightDiv）。我希望leftDiv在rightDiv的左边。这段代码工作正常。

<html>
<head>
<script type="text/javascript">
window.onload = function() {
   var outerDiv = document.createElement('div') ;
   var leftDiv = document.createElement('div') ;
   var rightDiv = document.createElement('div') ;

   outerDiv.id = 'outerDiv' ;
   outerDiv.className = 'myClass' ;
   leftDiv.id = 'leftDiv' ;
   rightDiv.id = 'rightDiv' ;
   leftDiv.style.border = '1px solid #000' ;
   rightDiv.style.border = '1px solid #000' ;

   document.body.insertBefore(outerDiv, document.body.firstChild);
   outerDiv.appendChild(leftDiv) ;
   outerDiv.appendChild(rightDiv) ;

   leftDiv.innerHTML='this is left div' ;
   rightDiv.innerHTML='this is right div' ;
}
</script>
<style>
.myClass div {
   float: left ;
   clear: none ;
}
</style>
</head>
<body>
</body>
</html>

但是，我想在javascript中做样式。所以，我想要float：left和clear：none在javascript函数中定义。我希望这可行：

outerDiv.style.cssFloat = 'left';
outerDiv.style.clear = 'none';

所以，我用这个替换了javascript函数。

<script type="text/javascript">
window.onload = function() {
   var outerDiv = document.createElement('div') ;
   var leftDiv = document.createElement('div') ;
   var rightDiv = document.createElement('div') ;

   outerDiv.id = 'outerDiv' ;
   outerDiv.style.cssFloat = 'left';
   outerDiv.style.clear = 'none';
   leftDiv.id = 'leftDiv' ;
   rightDiv.id = 'rightDiv' ;
   leftDiv.style.border = '1px solid #000' ;
   rightDiv.style.border = '1px solid #000' ;

   document.body.insertBefore(outerDiv, document.body.firstChild);
   outerDiv.appendChild(leftDiv) ;
   outerDiv.appendChild(rightDiv) ;

   leftDiv.innerHTML='this is left div' ;
   rightDiv.innerHTML='this is right div' ;
}
</script>

Firebug显示了我希望第二个示例的标记，所以我相信我的语法正确。

<div id="outerDiv" style="float: left; clear: none;">

但是，第二段HTML给了我两个垂直堆叠的div，好像我的浮动和清除没有真正生效。

我做错了什么？（是的，我确定jquery做得更好但我仍然想了解我不理解的内容！）

Answer 1

你为外部div设计样式，而不是内部div

leftDiv.style.cssFloat = 'left';
leftDiv.style.clear = 'none';

rightDiv.style.cssFloat = 'left';
rightDiv.style.clear = 'none';

FIDDLE

CSS定位所有DIV .myClass，您在上设置JS样式 < / strong> .myClass

.myClass div { float: left ; clear: none ; }

与
不同
var outerDiv = document.createElement('div') ; outerDiv.className = 'myClass' ; outerDiv.style.cssFloat = 'left'; outerDiv.style.clear = 'none';

Answer 2

这是因为JS只为一个元素（外部）创建样式。 CSS是继承的，影响左右孩子，而JS方法则没有。

在javascript中设置div的样式不起作用

2 个答案: