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 ...
随机推荐
- linux(centos7)下SVN服务器搭建
https://www.cnblogs.com/fuyuanming/p/6123395.html linux(centos)下SVN服务器如何搭建?说到SVN服务器,想必大家都知道,可以是在LINU ...
- 关于content的理解
Context字面意思上下文,位于framework packageandroid.content.Context中,其实该类为long型,类似Win32中的Handle句柄,很多方法需要通过 Con ...
- selenium-server--chromedriver环境
x 准备环境: 1.selenium-server-standalone-3.8.1.jar 2.chromedriver.exe 一.查看本地电脑chrome浏览器版本信息: 二.访问代理地址:ht ...
- IIS7多站点ssl配置及http自动跳转到https
SSL证书配置参考如下: http转https实战教程iis7.5 window08 IIS7安装多域名SSL证书绑定443端口 关键是修改C:\Windows\System32\inetsrv\co ...
- Maven简单项目及命令使用
项目结构如下 HelloWorld.java package pak1; public class HelloWorld { public String sayHello(){ return &quo ...
- # 丢包&&掉帧&&文件删除
丢包&&掉帧&&文件删除 丢包:指一个或多个数据包(packet)的数据无法透过网络到达目的地,丢失一些信息 掉帧:帧数就是在1秒钟时间里传输的图片的量,每一帧都是静止 ...
- Codeforces 1220E. Tourism
传送门 这是一道英语题,首先要读懂题目: $\text{Alex believes that his trip will be interesting only if he will not use ...
- 福建工程学院第十四届ACM校赛M题题解 fwt进阶,手推三进制fwt
第九集,结束亦是开始 题意: 大致意思就是给你n个3进制的数字,让你计算有多少对数字的哈夫曼距离等于i(0<=i<=2^m) 思路: 这个是一个防ak题,做法是要手推公式的fwt 大概就这 ...
- eclipse运行jsp出现404错误怎么办?
Window/Show View/Other/Server/Servers/双击“Tomcat v7.0 Server at localhost”在Server Locations配置中选择第二个选项 ...
- [Next] 五.next自定义内容
自定义 head 这是默认的 head 这样的 head 并不能满足我们的需求.next 公开了一个内置组件,用于将元素追加到<head>标签的.我们可以通过这个自定义 head 新建 c ...