+ -
当前位置:首页 → 问答吧 → 关于一个遍历设置CSS样式的问题?

关于一个遍历设置CSS样式的问题?

时间:2011-11-16

来源:互联网

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.....???

作者: LXH060204   发布时间: 2011-11-16

大家给点意见。。。

作者: LXH060204   发布时间: 2011-11-17

用jquery会是个不错的选择

作者: ifandui   发布时间: 2011-11-17

做这个的目的是什么?

作者: dd0607   发布时间: 2011-11-17

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";
                        }
                    }
            }
        }

作者: axiheyhey   发布时间: 2011-11-17

第一个问题已解决,谢谢axiheyhey的方法,比我的更为精简。

第二个问题,可以实现吗??? 》》》
<div id="div1">
<table></table>
<table></table>
<table></table>
</div>

有没有方法 使用js、Dom 批量设置它内部标签的css属性,如css一样中 #div1 table{display:inline;},而不用遍历它每个子项去设置。

作者: LXH060204   发布时间: 2011-11-17

相关阅读 更多