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

更新时间：2016年09月19日 08:11:59 投稿：jingxian

下面小编就为大家带来一篇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(var attr 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注意img图片的onerror事件的分析
打开网页时提示 Stack overflow at line: 0。img图片的onerror事件需要注意的细节。
2011-01-01
实例详解display:none与visible:hidden的区别
这篇文章主要介绍了实例详解display:none与visible:hidden的区别的相关资料,需要的朋友可以参考下
2017-03-03
JavaScript 过滤关键字
本文主要介绍了JavaScript过滤关键字的方法。具有很好的参考价值。下面跟着小编一起来看下吧
2017-03-03
获取JAVASCRIPT时间戳函数的5种方法
JavaScript获得时间戳的方法有五种,后四种都是通过实例化时间对象new Date() 来进一步获取当前的时间戳,JavaScript处理时间主要使用时间对象Date,本文对js时间戳函数获取方法给大家介绍的非常详细,需要的朋友参考下吧
2024-01-01
JavaScript常用脚本汇总（三）
本文给大家分享的常用脚本有通过数组，拓展字符串拼接容易导致性能的问题、页面视口滚动条的位置的辅助函数、调节元素透明度的函数、获取鼠标位置的几个通用的函数、使用cssdisplay属性来切换元素可见性的一组函数、样式相关的通用函数、获取元素当前的高度和宽度。
2015-03-03
javascript弹出带文字信息的提示框效果
这篇文章主要介绍了javascript弹出带文字信息的提示框效果,涉及javascript简单弹出窗口定义与样式相关操作技巧,需要的朋友可以参考下
2016-07-07
解析使用JS 清空File控件的路径值
本篇文章是对使用JS清空File控件的路径值的方法进行了详细的分析介绍，需要的朋友参考下
2013-07-07
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
这篇文章主要介绍了JavaScript设计模式之工厂模式和抽象工厂模式,结合实例形式分析了工厂模式的功能、定义、相关问题解决方法,并分析抽象工厂模式与工厂模式的不同之处,需要的朋友可以参考下
2018-07-07
js动画效果制件让图片组成动画代码分享
这篇文章主要介绍了使用js让图片组成动画,这样就可以用js做动画了，大家参考使用吧
2014-01-01
ajax在js中和jQuery中的用法实例详解
Ajax被认为是(Asynchronous(异步) JavaScript And Xml的缩写）,现在允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax,下面这篇文章主要给大家介绍了关于ajax在js中和jQuery中的用法,需要的朋友可以参考下
2021-08-08