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结合css实现网页换肤功能
Nov 02 Javascript
JQuery小知识
Oct 15 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
Aug 15 Javascript
基于JQuery实现图片上传预览与删除操作
May 24 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
Nov 17 Javascript
使用vue制作探探滑动堆叠组件的实例代码
Mar 07 Javascript
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
JavaScript之解构赋值的理解
Jan 30 Javascript
实现vuex原理的示例
Oct 21 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/08/21 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
基于jquery实现漂亮的动态信息提示效果
2011/08/02 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
2012/01/13 Javascript
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
2018/11/25 Javascript
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
JavaScript 监听组合按键思路及代码实现
2020/07/28 Javascript
Python中文件操作简明介绍
2015/04/13 Python
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
python实现动态创建类的方法分析
2019/06/25 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
Python考拉兹猜想输出序列代码实践
2019/07/05 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
Python调用OpenCV实现图像平滑代码实例
2020/06/19 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
房产分割协议书范文
2014/11/21 职场文书
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP