如果在一个网页中给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样式的更多相关文章

  1. js之如何获取css样式

    js之如何获取css样式   一.获取内联样式 1 <div id ="myDiv" style="width:100px;height:100px; border ...

  2. 每天一个JavaScript实例-展示设置和获取CSS样式设置

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. 用JS改变的元素CSS样式,css里display :none 隐藏 block 显示

    CSS样式的引用有3种方式:style引用.class引用.id引用,所以js改变元素的样式我们也分3种来说. 1.js改变由style方式引用的样式:方法一:document.divs.style. ...

  4. 网站图片列表动态显示、根据屏幕宽度动态设置DIV的CSS样式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. js设置奇偶行数样式

    $(document).ready(function () { odd = { "background": "none" }; //奇数样式 even = { ...

  6. 谷歌下设置滚动条的css样式

    .oLi-lists-scroll::-webkit-scrollbar { width:5px;  padding:1px; background:url(../images/repeat-bar. ...

  7. jquery设置多个css样式

    $(selector).css({property:value, property:value, ...}) 实例: $("p").css({ "color": ...

  8. 用jQuery设置多个css样式

    $("#show_one").css({"position":"fixed","top":"0px" ...

  9. vue中设置全局的css样式

    只需在main.js    ====import './style.less'   main.js =>>   import Vue from 'vue' import App from ...

随机推荐

  1. 什么是maven?maven中的pom文件是做什么的?

    Maven 是专门用于构建和管理Java相关项目的管理工具. 1.使用Maven管理的Java 项目都有着相同的项目结构 2.统一维护jar包 POM是项目对象模型(Project Object Mo ...

  2. SpringCloud(一):SpringCould 框架预览

    前言 SpringCloud是基于SpringBoot的一整套实现微服务的框架.他提供了微服务开发所需的配置管理.服务发现.断路器.智能路由.微代理.控制总线.全局锁.决策竞选.分布式会话和集群状态管 ...

  3. Git_mergetool_tutorial(转载)

    原文链接:https://gist.github.com/karenyyng/f19ff75c60f18b4b8149#table-of-content Table Of Content Skip t ...

  4. linux centos 安装输入法

    终端输入命令: yum install ibus-libpinyin.x86_64

  5. Intellij IDEA神器好用到飞起来的配置

    ​   IDEA 全称 IntelliJ IDEA,是java编程语言开发的集成环境. IntelliJ在业界被公认为最好的java开发工具之一, 尤其在智能代码助手.代码自动提示.重构.J2EE支持 ...

  6. 关于springcloud hystrix 执行 hystrix.stream 跳转失败的问题

    经过观看网友的总结:应该时版本的问题.某些版本没有对/hystrix.stream进行配置 所以解决方案(网友答案): 需要配置类配置下面 @Bean public ServletRegistrati ...

  7. 用Python快速找到出现次数最多的数据

    给你一个文件,每行一个iip?

  8. BugkuCTF--never give up

    这道题还挺有意思的... http://123.206.87.240:8006/test/hello.php 查看元素,有个1p.html,访问. 还没看到网页元素就跳转了...抓包! 抓到了一堆东西 ...

  9. python-day40(正式学习)

    目录 线程队列 1 2 3 线程定时器 进程池和线程池 线程队列 1 import queue q=queue.Queue() q.put('123') q.put('456') q.put('789 ...

  10. ArrayList扩容分析

    一段java代码 String e = "q3234v"; List<String> list = new ArrayList<String>(); for ...