dom 中style对象 属性的引用

style对象中clientWidth属性可以直接  document.write(xx.style.clientWidth) 取到值而 类似下面 属性
marginLeft  marginRight
borderLeftWidth
borderRightWidth都取不到，，后来看手册 发现 对很多属性的描述都是 “设置”某某属性值，没有“取得” 这样的字眼如何取得这些属性值呢？
——————————————————————————————————————
如果觉得上面描述不太清楚 请帮我看看代码：<link rel="stylesheet" type="text/css" href="/style/default.css"/>
<script type="text/javascript" src="/js/default.js"></script>
<div class="scroll" id="scroll">
<div class="demo1" id="demo1">
<ul>
<li><img src="fmedia/21centrury.jpg"/></li>
<li><img src="fmedia/cctv.gif"/></li>
<li><img src="fmedia/image001.gif"/></li>
<li><img src="fmedia/image002.jpg"/></li>
<li><img src="fmedia/image003.gif"/></li>
<li><img src="fmedia/image004.gif"/></li>
<li><img src="fmedia/image005.gif"/></li>
<li><img src="fmedia/凤凰网.gif"/></li>

<li><img src="fmedia/华人风电网.gif"/></li>
<li><img src="fmedia/环保设备网.gif"/></li>
<li><img src="fmedia/价值中国.gif"/></li>
<li><img src="fmedia/能源网.gif"/></li>
<li><img src="fmedia/中国风电材料设备网.jpg"/></li>
<li><img src="fmedia/中国环保网.jpg"/></li>
<li><img src="fmedia/中国会议网.jpg"/></li>
<li><img src="fmedia/中国能源网.gif"/></li>

<li><img src="fmedia/中国清洁能源网.png"/></li>
<li><img src="fmedia/中国脱硫脱硝资讯网.gif"/></li>
<li><img src="fmedia/中国新能源网.jpg"/></li>
</ul>
</div>
<div class="demo2" id="demo2"></div>
</div>
<script language="javascript" type="text/javascript">
    assignWidth("scroll","demo1","demo2");
toleft("scroll","demo1","demo2",10,"flag");
</script>
function $(id){return document.getElementById(id)}
//向左滚动函数,demo包含demo1与demo2,speed是滚动速度,flag一个网页内有多个时设置为不同的任意字符。
//by 柳永法(yongfa365)'Blog　www.yongfa365.com function toleft(demo,demo1,demo2,speed,flag){
demo=$(demo);demo1=$(demo1);demo2=$(demo2)
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0){
demo.scrollLeft-=demo1.offsetWidth
}
else{
demo.scrollLeft++
}
}
flag=setInterval(Marquee,speed)
demo.onmouseover=function(){clearInterval(flag);}
demo.onmouseout=function(){flag=setInterval(Marquee,speed);}
}

function assignWidth(demo,demo1,demo2){document.write("**********************<br/>");
demo = $(demo);
demo1 = $(demo1);
demo2 = $(demo2);
    demoWidth = parseInt(demo1.style.paddingLeft) + parseInt(demo1.style.paddingRight);
    lis = demo.getElementsByTagName('li');
for(var i = 0,count = lis.length; i < count; i++)
{
  demoWidth += lis[i].childNodes[0].clientWidth + lis[i].style.marginLeft + lis[i].style.marginRight + lis[i].style.borderLeftWidth + lis[i].style.borderRightWidth;
}

demo1.style.width = demoWidth;
demo2.style.width = demoWidth;
}
toleft   是 做图片滚动的
assignwidth  是用于取得图片宽度 结合 margin padding计算 div的宽度

解决方案 »

  1.   

    jquery 的可以：
    赋值：
    $("#id").css({ color: "#ff0011", background: "blue" }); 
    如果属性名包含 "-"的话，必须使用引号: 
    $("#id").css({ "margin-left": "10px", "background-color": "blue" }); 取值：
    $("#id").css("margin-left"); 
      

  2.   

    刚刚晚上搜了一下，搞定了，如果要取样式中 带有"-"中划线的属性值，只要将"-"去掉，再将第二个单词首字母大写就行了.例如：
    <script>
    function test(){
    var a = document.getElementById('aaa');
    alert(a.style.marginLeft); // L大写即可
    a.style.marginLeft = '300px';
    }
    </script>
    <body>
     <input type = "button" value = "aaaaa" onclick = "test()">
    <div id = "aaa" style="margin-left: 11px;">aaaaaaaaaaaaaaa<div>
    </body>
    </html> 
    我测试了，ok！