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实现的鼠标经过时播放声音
May 18 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
Jan 19 Javascript
JS自动缩小超出大小的图片
Oct 12 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
Jan 21 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
Sep 07 Javascript
react native与webview通信的示例代码
Sep 25 Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
Vue props 单向数据流的实现
Nov 06 Javascript
微信小程序上传文件到阿里OSS教程
May 20 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
用Simple Excel导出xls实现方法
2012/12/06 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
php类的定义与继承用法实例
2015/07/07 PHP
phpStudy 2016 使用教程详解(支持PHP7)
2017/10/18 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
JS图片无缝、平滑滚动代码
2014/03/11 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
Vue中的$set的使用实例代码
2018/10/08 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
Vue配置marked链接添加target="_blank"的方法
2019/07/19 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
在Python的Django框架中编写编译函数
2015/07/20 Python
Linux 发邮件磁盘空间监控(python)
2016/04/23 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
Python神奇的内置函数locals的实例讲解
2019/02/22 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
CSS3 特效范例整理
2011/08/22 HTML / CSS
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
英国领先的餐饮折扣俱乐部:Gourmet Society
2020/07/26 全球购物
Android面试题及答案
2015/09/04 面试题
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
出国留学担保书
2014/05/20 职场文书
党支部对照检查材料
2014/08/25 职场文书
商务英语邮件开头问候语
2015/11/10 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书
opencv 分类白天与夜景视频的方法
2021/06/05 Python