遍历某DIV下所有li，并在每个子li点击时触发此DIV的样式修改

如题，我是这样写的，不知道哪里不对，请帮忙调下，谢谢！

 <script>
   window.onload=function(){
     var divs =  document.getElementsByTagName("#col-lg-2");
    $("#dd-item").onclik(function()
            {divs.style.csstext='width: 25%; height:100%; position:fixed; top:350px; overflow-y:3px;'}) 
        }
 </script>      

 <div id="col-lg-2" class="col-lg-2" style="width: 25%">
  <ol class="dd-list">
                                    <li class="dd-item" data-id="1">
                                        <div class="dd-handle" id="li_Preliminary_Analysis">初步分析</div>
                                    </li>
                                    <li class="dd-item" data-id="2">
                                        <div class="dd-handle" id="li_Early_Disposal">先期处置</div>
                                    </li>
                                    <li class="dd-item" data-id="3">
                                        <div class="dd-handle" id="li_Middle_Disposal">中期处置</div>
                                                                                                        </li>
                                </ol>
                                </div>

最好能将具体调整代码示范，不做过多设置

 <script>
    window.onload=function(){
        var $_oDiv = document.querySelector("#col-lg-2");
        var $_aLis = $_oDiv.querySelectorAll('li');
        $_aLis.forEach(function(index, item){
            this.onclick = function(){
                $_oDiv.style.cssText='width: 25%; height:100%; position:fixed; top:350px; overflow-y:3px;
            }
        });
    }
</script>

<div id="col-lg-2" class="col-lg-2" style="width: 25%">
    <ol class="dd-list">
        <li class="dd-item" data-id="1">
            <div class="dd-handle" id="li_Preliminary_Analysis">初步分析</div>
        </li>
        <li class="dd-item" data-id="2">
            <div class="dd-handle" id="li_Early_Disposal">先期处置</div>
        </li>
        <li class="dd-item" data-id="3">
            <div class="dd-handle" id="li_Middle_Disposal">中期处置</div>
        </li>
    </ol>
</div>

你用的getElementsByTagName函数传入的参数应该是标签名，但是你写的却是id，获取所有li应该是这么写吧：

var divs =  document.getElementsByTagName("li");

用下jquery库可能实现js功能会更简单

可以用事件代理delegate, 利用事件冒泡做

你这段代码JS与JQ的用法已经混乱了，一共以下几点：（以下代码默认为你已经引入JQ了）
1.var divs = document.getElementsByTagName("#col-lg-2"); 这一句document.getElementsByTagName获取的是DOM中标签获取到的为结果集，你这确实给的一个 #col-lg-2
2. $("#dd-item").onclik(function(){}）；这一句你是用的JQ中的$()来获取DOM元素的，但是onclick是JS的点击事件。你这里混用了，JQ点击事件是这样的$('').click(function(){}); JS点击事件是这样的 XX.onclick=function(){};
3. $("#dd-item")根据id获取，而你的结构中根本没有id名为dd-item 的元素
4.cssText中的T是大写而不是小写，

就算你以上代码写对了，代码也是混乱的，主要是你的逻辑不对（以你架构的代码来看）
你要是想实现 当li点击的时候他的父级div的样式变的话为什么要给li加点击事件呢，直接在div上加点击事件不就行了吗（你div中也没有其他元素）？（除非你ol的 padding 或margin 设置的很大）

要是按照你的代码来更改的话应该是这样（不在div上添加点击事件）：
var divs= document.getElementById("col-lg-2");
$(".dd-item").click(function(){
divs.style.cssText='width: 25%; height:100%; position:fixed; top:350px; overflow-y:3px;';
});

如果你是JS和JQ还不能分辨太清就先写JS差不多了在用JQ写（单独的JQ）,两个都差不多了在试着混用看看自己能否运用自如是否对这两个的理解透

看看一下代码：

window.onload=function(){ var $_oDiv = document.querySelector("#col-lg-2"); var $_aLis = $_oDiv.querySelectorAll('li'); $_aLis.forEach(function(index, item){ this.onclick = function(){ $_oDiv.style.cssText='width: 25%; height:100%; position:fixed; top:350px; overflow-y:3px; } }); }

你用了jquery没有了？jquery和原生dom没搞清楚你。。

<script>
    window.onload = function () {
        var items = document.querySelectorAll('.dd-item');//获取所有dd-item样式的控件
        var col = document.querySelectorAll('.col-lg-2');
        for (var i = 0; i < items.length; i++) {
            items[i].onclick = function () {
                for (var i = 0; i < col.length; i++) col[i].style.cssText = '';

                var div = this.parentNode.parentNode//点击的li所在col-lg-2容器
                //注意大小写，是cssText
                div.style.cssText = 'width: 25%; height:100%; position:fixed; top:350px; overflow-y:3px;'
            }
        }
    }
</script>

<div id="col-lg-2" class="col-lg-2" style="width: 25%">
    <ol class="dd-list">
        <li class="dd-item" data-id="1">
            <div class="dd-handle" id="li_Preliminary_Analysis">1初步分析</div>
        </li>
        <li class="dd-item" data-id="2">
            <div class="dd-handle" id="li_Early_Disposal">1先期处置</div>
        </li>
        <li class="dd-item" data-id="3">
            <div class="dd-handle" id="li_Middle_Disposal">1中期处置</div>
        </li>
    </ol>
</div>
<div id="col-lg-2" class="col-lg-2" style="width: 25%">
    <ol class="dd-list">
        <li class="dd-item" data-id="1">
            <div class="dd-handle" id="li_Preliminary_Analysis">2初步分析</div>
        </li>
        <li class="dd-item" data-id="2">
            <div class="dd-handle" id="li_Early_Disposal">2先期处置</div>
        </li>
        <li class="dd-item" data-id="3">
            <div class="dd-handle" id="li_Middle_Disposal">2中期处置</div>
        </li>
    </ol>
</div>

<script type="text/javascript">

    $('#propertyli').live('click', function() {
里面是li的单机事件需要执行的任务。
$('#propertyId').arr('background','#efefef');
    });
</script>