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 相关文章推荐
JSON 客户端和服务器端的格式转换
Aug 27 Javascript
基于JQuery的Pager分页器实现代码
Jul 17 Javascript
javascript检测浏览器flash版本的实现代码
Dec 06 Javascript
基于JavaScript实现 网页切出 网站title变化代码
Apr 03 Javascript
完美实现八种js焦点轮播图(下篇)
Apr 20 Javascript
使用jquery给指定的table动态添加一行、删除一行
Oct 13 Javascript
jQuery源码分析之init的详细介绍
Feb 13 Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 Javascript
vue中本地静态图片路径写法
Mar 06 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
js函数和this用法实例分析
Mar 13 Javascript
Javascript实现单选框效果
Dec 09 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遍历目录viewDir函数
2009/12/15 PHP
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
调试Node.JS的辅助工具(NodeWatcher)
2012/01/04 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
node.js中的fs.futimes方法使用说明
2014/12/17 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
js核心基础之构造函数constructor用法实例分析
2019/05/11 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
js实现随机点名
2021/01/19 Javascript
python 队列详解及实例代码
2016/10/18 Python
利用Python中的pandas库对cdn日志进行分析详解
2017/03/07 Python
对pandas replace函数的使用方法小结
2018/05/18 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
关于Python中的向量相加和numpy中的向量相加效率对比
2019/08/26 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
Python grequests模块使用场景及代码实例
2020/08/10 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
高三上学期学习自我评价
2014/04/23 职场文书
机关搬迁方案
2014/05/18 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
仙境之桥观后感
2015/06/16 职场文书
学前教育见习总结
2015/06/23 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书
python计算列表元素与乘积详情
2022/08/05 Python