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

Question

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

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

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

Answer 1

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