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中sort()的用法实例分析
Jan 30 Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 Javascript
jQuery实现折线图的方法
Feb 28 Javascript
Css3制作变形与动画效果
Jul 24 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
Apr 26 Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 Javascript
对称加密与非对称加密优缺点详解
Feb 06 Javascript
JS document内容及样式操作完整示例
Jan 14 Javascript
详解vue-router的Import异步加载模块问题的解决方案
May 13 Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
Vue仿Bibibili首页的问题
Jan 21 Vue.js
JS实现简易日历效果
Jan 25 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+mysql数据库查询实例
2015/01/21 PHP
Laravel搭建后台登录系统步骤详解
2016/07/26 PHP
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
JS DOM 操作实现代码
2010/08/01 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
js控制CSS样式属性语法对照表
2012/12/11 Javascript
javascript真的不难-回顾一下基础知识
2013/01/15 Javascript
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
js+ajax实现获取文件大小的方法
2015/12/08 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
基于JS实现前端压缩上传图片的实例代码
2019/05/14 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
软件测试工程师面试问题精选
2016/10/28 面试题
大学生自我评价怎样写好
2013/10/23 职场文书
工作过失检讨书
2014/02/23 职场文书
喝酒检查书范文
2014/02/23 职场文书
出纳员岗位职责风险
2014/03/06 职场文书
家长通知书家长评语
2014/04/17 职场文书
毕业证委托书范文
2014/09/26 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python