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 相关文章推荐
表单提交验证类
Jul 14 Javascript
判断脚本加载是否完成的方法
May 26 Javascript
JS 进度条效果实现代码整理
May 21 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
获取阴历(农历)和当前日期的js代码
Feb 15 Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 Javascript
Vue自定义指令实现checkbox全选功能的方法
Feb 28 Javascript
Vue父子组件传值的一些坑
Sep 16 Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 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
Zerg兵种介绍
2020/03/14 星际争霸
php下实现伪 url 的超简单方法[转]
2007/09/24 PHP
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
php模仿asp Application对象在线人数统计实现方法
2015/01/04 PHP
PHP中key和current,next的联合运用实例分析
2016/03/29 PHP
jquery.validate使用攻略 第二部
2010/07/01 Javascript
window.name代替cookie的实现代码
2010/11/28 Javascript
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
js关于字符长度限制的问题示例探讨
2014/01/24 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
js原生之焦点图转换加定时器实例
2016/12/12 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
基于js 各种排序方法和sort方法的区别(详解)
2018/01/03 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
jQuery pjax 应用简单示例
2018/09/20 jQuery
JS实现网站吸顶条
2020/01/08 Javascript
JS删除对象中某一属性案例详解
2020/09/08 Javascript
Python学习入门之区块链详解
2017/07/25 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
python实现列表的排序方法分享
2019/07/01 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
波兰家具和室内装饰品购物网站:Vivre
2018/04/10 全球购物
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
.net C#面试题
2012/08/28 面试题
一年级班主任寄语
2014/01/19 职场文书
集中整治工作方案
2014/05/01 职场文书
寒山寺导游词
2015/02/03 职场文书
2015年少先队活动总结
2015/03/25 职场文书
2015年保险公司内勤工作总结
2015/05/23 职场文书
邹越演讲观后感
2015/06/15 职场文书
2019年个人工作总结范文
2019/03/25 职场文书
基于JavaScript实现省市联动效果
2021/06/22 Javascript