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 validate在ie8下的bug解决方法
Nov 13 Javascript
jQuery实现预加载图片的方法
Mar 17 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
May 09 Javascript
jquery实现垂直和水平菜单导航栏
Aug 27 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
js断点调试心得分享(必看篇)
Dec 08 Javascript
微信小程序排坑指南详解
May 23 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 Javascript
微信小程序自定义可滑动日历界面
Dec 28 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 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获取字符串的编码格式的方法(函数)
2013/06/21 PHP
codeigniter教程之多文件上传使用示例
2014/02/11 PHP
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
2019/11/09 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
python中函数默认值使用注意点详解
2016/06/01 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
python实现机器人卡牌
2019/10/06 Python
python爬虫泛滥的解决方法详解
2020/11/25 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
精选干货:Java精选笔试题附答案
2014/01/18 面试题
2013年学期结束动员演讲稿
2014/01/07 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
《天净沙·秋思》教学反思三篇
2019/11/02 职场文书
python实现A*寻路算法
2021/06/13 Python
springcloud之Feign超时问题的解决
2021/06/24 Java/Android
win10怎么设置右下角图标不折叠?Win10设置右下角图标不折叠的方法
2022/07/15 数码科技