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 相关文章推荐
自己动手开发jQuery插件教程
Aug 25 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
全面解析Bootstrap中transition、affix的使用方法
May 30 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
Dec 07 Javascript
js面向对象编程总结
Feb 16 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
vue 标签属性数据绑定和拼接的实现方法
May 17 Javascript
Express之托管静态文件的方法
Jun 01 Javascript
利用原生JS实现data方法示例代码
May 28 Javascript
JS实现普通轮播图特效
Jan 01 Javascript
vue.js封装switch开关组件的操作
Oct 26 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
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
PHP常用代码大全(新手入门必备)
2010/06/29 PHP
PHP仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
购物车选中得到价格实现示例
2014/01/26 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
2015/05/20 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
2015/07/31 Javascript
jquery Easyui快速开发总结
2015/08/20 Javascript
AngularJS自动表单验证
2016/02/01 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
微信小程序中实现一对多发消息详解及实例代码
2017/02/14 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
浅谈Vue 数据响应式原理
2018/05/07 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
2018/08/27 Javascript
vue插件实现v-model功能
2018/09/10 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
使用express来代理服务的方法
2019/06/21 Javascript
vue将data恢复到初始状态 && 重新渲染组件实例
2020/09/04 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
Python算法应用实战之队列详解
2017/02/04 Python
基于python中的TCP及UDP(详解)
2017/11/06 Python
pandas 条件搜索返回列表的方法
2018/10/30 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
创建Shapefile文件并写入数据的例子
2019/11/26 Python
详解Python实现进度条的4种方式
2020/01/15 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
2013的个人自我评价
2013/12/26 职场文书
社区端午节活动方案
2014/01/28 职场文书
2014年关工委工作总结
2014/11/17 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
python中对列表的删除和添加方法详解
2022/02/24 Python