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


Posted in Javascript onSeptember 19, 2016

如果网页中一个 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样式的简单方法的全部内容了,希望对大家有所帮助,多多支持三水点靠木~

Javascript 相关文章推荐
javascript十个最常用的自定义函数(中文版)
Sep 07 Javascript
基于jquery的3d效果实现代码
Mar 23 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
Jul 31 Javascript
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 Javascript
快速解决js中window.location.href不工作的问题
Nov 02 Javascript
深入解析koa之中间件流程控制
Jun 17 Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 Javascript
小程序实现tab标签页
Nov 16 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 #Javascript
基于jQuery实现中英文切换导航条效果
Sep 18 #Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 #Javascript
jQuery EasyUI封装简化操作
Sep 18 #Javascript
基于jQuery ligerUI实现分页样式
Sep 18 #Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 #Javascript
JQuery控制DIV的选取实现方法
Sep 18 #Javascript
You might like
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
示例详解Laravel重置密码代码重构
2016/08/10 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
使用EXT实现无刷新动态调用股票信息
2008/11/01 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
2012/01/15 Javascript
javascript匿名函数应用示例介绍
2014/03/07 Javascript
原生JavaScript编写俄罗斯方块
2015/03/30 Javascript
js实现的倒计时按钮实例
2015/06/24 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
如何阻止移动端浏览器点击图片浏览
2020/08/29 Javascript
Python中的模块和包概念介绍
2015/04/13 Python
Python的Django框架使用入门指引
2015/04/15 Python
Python类定义和类继承详解
2015/05/08 Python
python去掉行尾的换行符方法
2017/01/04 Python
python如何定义带参数的装饰器
2018/03/20 Python
基于python log取对数详解
2018/06/08 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
python多线程http压力测试脚本
2019/06/25 Python
python读取Excel表格文件的方法
2019/09/02 Python
python实现简易淘宝购物
2019/11/22 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
J2EE是技术还是平台还是框架
2016/08/14 面试题
大学生村官典型材料
2014/01/12 职场文书
高中军训感想800字
2014/02/23 职场文书
行政管理专业求职信
2014/07/06 职场文书
乐山大佛导游词
2015/02/02 职场文书
详解Nginx启动失败的几种错误处理
2021/04/01 Servers