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 相关文章推荐
select组合框option的捕捉实例代码
Sep 30 Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
javascript中eval函数用法分析
Apr 25 Javascript
js控制div弹出层实现方法
May 11 Javascript
php基于redis处理session的方法
Mar 14 Javascript
JavaScript实现九九乘法表的简单实例
Jun 07 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
Jan 01 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 Javascript
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 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
php5.3 goto函数介绍和示例
2014/03/21 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
php 中的closure用法详解
2017/06/12 PHP
django中的ajax组件教程详解
2018/10/18 PHP
安装docker和docker-compose实例详解
2019/07/30 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
picChange 图片切换特效的函数代码
2010/05/06 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
javascript中的作用域scope介绍
2010/12/28 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
jQuery实现图像旋转动画效果
2016/05/29 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
gulp解决跨域的配置文件问题
2017/06/08 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
在小程序开发中使用npm的方法
2018/10/17 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
tornado捕获和处理404错误的方法
2014/02/26 Python
Python3中多线程编程的队列运作示例
2015/04/16 Python
利用Python的装饰器解决Bottle框架中用户验证问题
2015/04/24 Python
一步步解析Python斗牛游戏的概率
2016/02/12 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
小蚁科技官方商店:YI Technology
2019/08/23 全球购物
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
行政办公员自我评价分享
2013/12/14 职场文书
室内设计专业个人的自我评价
2013/12/18 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
新郎新娘致辞
2015/07/31 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书
Python实现生活常识解答机器人
2021/06/28 Python