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 相关文章推荐
爱恋千雪-US-AscII加密解密工具(网页加密)下载
Jun 06 Javascript
javascript 数组排序函数sort和reverse使用介绍
Nov 21 Javascript
JavaScript代码性能优化总结篇
May 15 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
Jun 17 Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 Javascript
Bootstrap响应式表格详解
May 23 Javascript
JavaScript实现三级级联特效
Nov 05 Javascript
Vue修改mint-ui默认样式的方法
Feb 03 Javascript
最后说说Vue2 SSR 的 Cookies 问题
May 25 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
JS实现放烟花效果
Mar 10 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 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常用的缓存技术汇总
2014/05/05 PHP
php查询ip所在地的方法
2014/12/05 PHP
php匹配字符中链接地址的方法
2014/12/22 PHP
php简单统计在线人数的方法
2016/05/10 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
Jquery实现三层遍历删除功能代码
2013/04/23 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
node.js中的path.dirname方法使用说明
2014/12/09 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
2017/10/31 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
vue插槽slot的理解和使用方法
2019/04/03 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
利用pandas读取中文数据集的方法
2018/07/25 Python
python对html过滤处理的方法
2018/10/21 Python
python/sympy求解矩阵方程的方法
2018/11/08 Python
Python3.7 dataclass使用指南小结
2019/02/22 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
杠杆的科学教学反思
2014/01/10 职场文书
倡议书范文
2014/04/16 职场文书
冬季安全检查方案
2014/05/23 职场文书
医学生自荐信范文
2015/03/05 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
工作简历的自我评价
2019/05/16 职场文书
JavaScript实现酷炫的鼠标拖尾特效
2022/02/18 Javascript
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript