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

html-css08

js中用cssText设置css样式的简单方法,第1张

如果网页中一个

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样式的简单方法的全部内容了,希望对大家有所帮助,多多支持脚本之家~

基础性的学习网站:

w3school:http://www.w3school.com.cn/

w3cplus:www.w3cplus.com

MDN网站 :https://developer.mozilla.org/zh-CN/docs/Web

菜鸟教程网:http://www.runoob.com

易百教程:http://www.yiibai.com/

脚本之家:http://www.jb51.net

视频类的学习网站:

尚学堂:http://www.bjsxt.com/

慕课网:https://www.imooc.com/

扣丁课堂:https://www.codingke.com/

极客学院:http://www.jikexueyuan.com/

腾讯课堂:https://ke.qq.com/

个人博客类的学习网站:

张鑫旭:http://www.zhangxinxu.com/

阮一峰:http://www.ruanyifeng.com/home.html

廖雪峰:https://www.liaoxuefeng.com/

辰辰:http://www.chennoted.com/

轩枫阁:http://www.xuanfengge.com/

社区类的学习网站:

segmentfault:https://segmentfault.com/

掘金:https://juejin.im/

简书:https://www.jianshu.com/

WEB前端-伯乐在线:http://web.jobbole.com/

Stack Overflow:https://stackoverflow.com/

CSDN:https://www.csdn.net/

博客园:https://www.cnblogs.com/

开发者头条:https://toutiao.io/