javascript基础练习-获取和设置行内样式

来源：互联网发布：神话电话软件编辑：程序博客网时间：2024/06/06 09:38

效果图如下:

代码部分如下:

<!DOCTYPE html><html><head><title></title><style type="text/css">.box{width: 300px;height: 100px;background: orange;margin: 0 auto;padding: 20px;color: white;transition: all 0.3s;}</style><script type="text/javascript">window.onload=function(){var box=document.getElementById('box');var word=document.getElementById('word');var btn=document.getElementsByTagName("button");var text=document.getElementsByTagName("input");function getStyle(obj,attr){    //获取非行间样式，obj是对象，attr是值    if(obj.currentStyle){       //针对ie获取非行间样式        return obj.currentStyle[attr];    }else{        return getComputedStyle(obj,false)[attr];   //针对非ie    };};function get(name,value){if(arguments.length==1){   //当传入的实参只有一个时执行的操作 return getStyle(box,name);}else{box.style[name]=value;}}btn[0].onclick=function(){word.innerHTML="当前容器的样式为:"+"<br/>"+text[0].value+":"+get(text[0].value);}btn[1].onclick=function(){get(text[0].value,text[1].value);}}</script></head><body>请输入属性名:<input type="text" name=""><br/>请输入要设置的值:<input type="text" name=""><br/><button>获取行间样式</button><button>设置行间样式</button><div class="box" id="box" ><div id="word"></div></div></body></html>

阅读全文

0 0