js 设置多条css样式
如果在一个网页中给id="mydiv"的元素添加css样式,先获取该节点:
var obj = document.getElementById("mydiv");
给节点添加css:
如果需要添加的css不多的话,可以obj.style.width = "300px";
如果需要添加多条css语句的话,这样会有多条,如:
obj.style.width="300px";
obj.style.height="300px";
obj.style.border="1px solid #ddd";
……
这样会不会显得有些麻烦,且需要重复敲写类似的语句,那么可以这样:
(1)通过自己编写js函数设置css
function setCss(obj,css){
for(var attr in css){
obj.style[attr] = css[attr];
}
}
setCss(obj,{"width":"300px","height":"300px","border":"1px solid #ddd"});
(2)通过cssText方法设置css
obj.style.cssText = "width:300px;height:300px;border:1px solid #ddd;";
这样会不会显得简单,且方便了很多呢,特别是对于新create的元素进行初始化css样式
js 设置多条css样式的更多相关文章
- js之如何获取css样式
js之如何获取css样式 一.获取内联样式 1 <div id ="myDiv" style="width:100px;height:100px; border ...
- 每天一个JavaScript实例-展示设置和获取CSS样式设置
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 用JS改变的元素CSS样式,css里display :none 隐藏 block 显示
CSS样式的引用有3种方式:style引用.class引用.id引用,所以js改变元素的样式我们也分3种来说. 1.js改变由style方式引用的样式:方法一:document.divs.style. ...
- 网站图片列表动态显示、根据屏幕宽度动态设置DIV的CSS样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js设置奇偶行数样式
$(document).ready(function () { odd = { "background": "none" }; //奇数样式 even = { ...
- 谷歌下设置滚动条的css样式
.oLi-lists-scroll::-webkit-scrollbar { width:5px; padding:1px; background:url(../images/repeat-bar. ...
- jquery设置多个css样式
$(selector).css({property:value, property:value, ...}) 实例: $("p").css({ "color": ...
- 用jQuery设置多个css样式
$("#show_one").css({"position":"fixed","top":"0px" ...
- vue中设置全局的css样式
只需在main.js ====import './style.less' main.js =>> import Vue from 'vue' import App from ...
随机推荐
- webdriervAPI(下载文件)
from selenium import webdriver driver = webdriver.Chorme() driver.get("http://www.baidu.co ...
- Go语言入门篇-网络经验
Go语言学习手册 golang*看云 golang圣经 wuYinIO 1.go语言开发中的坑 go新手容易犯的三个致命错误 Golang 需要避免踩的 50 个坑 2.go语言数据类型 map ...
- java内存模型的实现
前几天,发了一篇文章,介绍了一下JVM内存结构.Java内存模型以及Java对象模型之间的区别.其中,Java内存模型,是这三个知识点当中最晦涩难懂的一个,而且涉及到很多背景知识和相关知识. 网上有很 ...
- HDU 1260 Tickets (动态规划)
Tickets Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Sub ...
- idea自动化部署插件 Alibaba Cloud Toolkit 使用记录
官方安装文档和使用说明 https://help.aliyun.com/product/29966.html?spm=a2c4g.11186623.6.540.6efa6029JhlPfx 是什么? ...
- 如何使用JavaScript实现前端导入和导出excel文件
一.SpreadJS 简介 SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件,以“高速低耗.纯前端.零依赖”为产品特色,可嵌入任何操作系统,同时满足 .NE ...
- 必备idea 插件plugins 提高编码效率
最近发现了几个非常好用 提高编码效率 的idea 插件 跟大家分享一下 因为idea自带的插件下载可能连接不上服务器而导致插件下载失败,所以这里推荐使用引入外部插件的方式 插件包也给你们准备好了( ...
- python基础_面向对象进阶
@property装饰器 之前我们讨论过Python中属性和方法访问权限的问题,虽然我们不建议将属性设置为私有的,但是如果直接将属性暴露给外界也是有问题的,比如我们没有办法检查赋给属性的值是否有效.我 ...
- Android开发build出现java.lang.NumberFormatException: For input string: "tle 0x7f0800aa"错误的解决方案
查看异常栈没有发现项目代码的问题,因为问题是出现在layout文件中. 全局查找tle这个,发现在某个layout文件中title一词被变成ti tle了,结果Android就xjb报错了. 参考
- StandardWrapper
Tomcat中有四种类型的Servlet容器,分别是 Engine.Host.Context.Wrapper,每个Wrapper实例表示一个具体的Servlet定义,StandardWrapper就是 ...