js中用cssText设置css样式的简单方法

如果网页中一个id为“no”的标签，暂且当div标签来tell；想要在js中设置这个div的css样式，很一般的做法是：

var obj=document.getElementByIdx_x_x('no');

obj.style.width='400px';obj.style.height='300px';

如果要设置一堆又一堆的css样式呢，太麻烦了把、

一般情况下都会结合css来添加className或者改变className达到想要的效果，但是如果你create一个元素，难道还想这样简单点？那就要想别的办法了~

于是大家就写了一个又一个的函数，经典的两个是：

var obj=document.getElementByIdx_x_x('no');

function setStyle(obj,css)

{

for(varattr in obj){

obj.style[attr]=css[attr];

}

}setStyle(obj,{width:"400px",height:"300px"});

当然还有更简单的，cssText：

var obj=document.getElementByIdx_x_x('no');

obj.style.cssText="width:400px;height:300px;";

当然这种方法对于create的元素初始化css样式来说很简单很方便。

以上就是小编为大家带来的js中用cssText设置css样式的简单方法的全部内容了，希望对大家有所帮助，多多支持脚本之家~

在页面内用JS操作CSS除非用AJAX，但操作页面内的样式的话，是可以的。操作样式分为改变直接样式，改变className和改变cssText三种

一、局部改变样式

调用方法：

改变className

<div id="demo">测试</div>

<script>

document.getElementById('demo').className="test";

</script>

改变直接样式

<div id="demo">测试</div>

<script>

document.getElementById('obj').style.backgroundColor="#003366";

</script>

二、全局改变样式

可以通过改变外链样式的的href的值实现网页样式的实时切换

<link rel = "stylesheet" type="text/css" id="css" href="firefox.css" />

<span on click="javascript:document.getElementById('css').href = 'ie.css'">点我改变样式</span>

喜欢 (0)赏

[]

分享 (0)