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 预解析
Oct 25 Javascript
js获得鼠标的坐标值的方法
Mar 13 Javascript
使用js实现雪花飘落效果
Aug 26 Javascript
原生js事件的添加和删除的封装
Jul 01 Javascript
js window对象属性和方法相关资料整理
Nov 11 Javascript
EasyUI学习之Combobox级联下拉列表(2)
Dec 29 Javascript
几种tab切换详解
Feb 03 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
Feb 08 Javascript
解决vue-router中的query动态传参问题
Mar 20 Javascript
layui的table单击行勾选checkbox功能方法
Aug 14 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
Js跳出两级循环方法代码实例
Sep 22 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
德劲1102收音机的打理维修案例
2021/03/02 无线电
在php MYSQL中插入当前时间
2008/04/06 PHP
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
js 深拷贝函数
2008/12/04 Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
javascript学习笔记(四) Number 数字类型
2012/06/19 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
jQuery插件开发汇总
2016/05/15 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
Python中Proxypool库的安装与配置
2018/10/19 Python
Django框架验证码用法实例分析
2019/05/10 Python
python实现桌面气泡提示功能
2019/07/29 Python
python实现网页录音效果
2020/10/26 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
英国假睫毛购买网站:FalseEyelashes.co.uk
2018/05/23 全球购物
Linux文件操作命令都有哪些
2016/07/23 面试题
国贸专业毕业求职信
2014/06/11 职场文书
班级文化建设标语
2014/06/23 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
Java数据结构之堆(优先队列)
2022/05/20 Java/Android