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 相关文章推荐
改版了网上的一个js操作userdata
Apr 27 Javascript
鼠标事件延时切换插件
Mar 12 Javascript
封装了一个js图片轮换效果的函数
Sep 28 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
jQuery+JSON实现AJAX二级联动实例分析
Dec 18 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
Angular2之二级路由详解
Aug 31 Javascript
vue-router beforeEach跳转路由验证用户登录状态
Dec 26 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
vue+ts下对axios的封装实现
Feb 18 Javascript
Openlayers绘制地图标注
Sep 28 Javascript
vue的$http的get请求要加上params操作
Nov 12 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
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
php操作MongoDB基础教程(连接、新增、修改、删除、查询)
2014/03/25 PHP
详解PHP中的Traits
2015/07/29 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
JScript的条件编译
2007/05/29 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
2016/05/16 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
vue-resource post数据时碰到Django csrf问题的解决
2020/03/13 Javascript
python判断windows系统是32位还是64位的方法
2015/05/11 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
pandas 使用apply同时处理两列数据的方法
2018/04/20 Python
Python中dict和set的用法讲解
2019/03/28 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
python文件路径操作方法总结
2020/12/21 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
《毛主席在花山》教学反思
2014/04/20 职场文书
银行转正自我鉴定
2014/09/29 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
Python经常使用的一些内置函数
2022/04/11 Python