关于一个遍历设置CSS样式的有关问题
日期：2014-05-16 浏览次数：20489 次
关于一个遍历设置CSS样式的问题？
依据节点的排序，上面有三层
实现：
从根节点中获取 tagNmae="DIV" 的子节点（第二层，共3个），获取之后判断： 如果第二层中tagNmae="DIV"的节点内，不包 tagName="DIV"的子节点（第三层），即子节点只有table，则设置这些table的display="inline"
结果是：第二层最后2个div内只有table标签，所以设置这两个div内table的display="inline"
使用js、Dom如何实现
问题二：
<div id="div1">
<table></table>
<table></table>
<table></table>
</div>
使用js、Dom 获取div对象后，如果批量设置它内部标签的css属性，如css样式中 #div1 table{display:inline;}，而不用遍历它每个子项去设置。
document.getElementById("div1").style.....???
------解决方案--------------------
用jquery会是个不错的选择
------解决方案--------------------
- HTML code
<div>
<table></table>
<div>
<table></table>
<div></div>
<table></table>
<div></div>
</div>
<table></table>
<div>
<table></table>
<table></table>
<table></table>
<table></table>
</div>
<table></table>
<div>
<table></table>
<table></table>
<table></table>
</div>
</div>
依据节点的排序，上面有三层
实现：
从根节点中获取 tagNmae="DIV" 的子节点（第二层，共3个），获取之后判断： 如果第二层中tagNmae="DIV"的节点内，不包 tagName="DIV"的子节点（第三层），即子节点只有table，则设置这些table的display="inline"
结果是：第二层最后2个div内只有table标签，所以设置这两个div内table的display="inline"
使用js、Dom如何实现
问题二：
<div id="div1">
<table></table>
<table></table>
<table></table>
</div>
使用js、Dom 获取div对象后，如果批量设置它内部标签的css属性，如css样式中 #div1 table{display:inline;}，而不用遍历它每个子项去设置。
document.getElementById("div1").style.....???
------解决方案--------------------
用jquery会是个不错的选择
------解决方案--------------------
- JScript code
var root_div = document.getElementById('div1');
var second_divs = root_div.children;
for(var i = 0; i < second_divs.length; i++){
var second_div = second_divs[i];
if('div' === second_div.nodeName.toLowerCase()){
if(second_div.getElementsByTagName('table').length === second_div.children.length){
var three_divs = second_div.children;
for(var j = 0; j < three_divs.length; j++){
three_divs[j].style.display = "inline";
}
}
}
}
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
