如果在一个网页中给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. sqlalchemy映射数据库

    from sqlalchemy import create_engine,Column,Integer,String from sqlalchemy.ext.declarative import de ...

  2. Vue 项目结构介绍

    Vue 项目创建完成后,使用 Web Storm 打开项目,项目目录如下: build 文件夹,用来存放项目构建脚本 config 中存放项目的一些基本配置信息,最常用的就是端口转发 node_mod ...

  3. 树莓派3 安装kali注意事项(无需显示器、键鼠连接树莓派)2017/9/18更新

     kali系统树莓派专用版下载地址https://www.offensive-security.com/kali-linux-arm-images/ 官方下载页面https://www.kali.or ...

  4. PLSQL中查到的数据和程序中查询到的不一样

    1.首先看下你的修改或者新增的SQL是否提交.

  5. Idea中通过Git将代码同步到GitHub

    一.Idea中配置Git 点击IntelliJ IDEA->Preferences...->Version Control->Git->Path to Git executab ...

  6. CSUST 2012 一个顶俩 (本校OJ题)(思维+树链剖分)

    (点击这里查看原题,不保证可以进去....外网可能比较卡) Description A:一心一意 B:一个顶俩 最近QQ更新后那个成语接龙好像挺火的?但我只知道图论里一条边是一个顶俩个点的emm. 如 ...

  7. CentOS7通过YUM安装MySQL5.6

    检查系统中的 MySQL,并删除现有的 Mysql 软件包. $ rpm -qa | grep mysql 这里如果没有返回任何东西证明没有安装任何 MySQL 相关的应用.如下图: 由于 cento ...

  8. Thinkphp5.0快速入门笔记(3)

    学习来源与说明 https://www.kancloud.cn/thinkphp/thinkphp5_quickstart 测试与部署均在windows10下进行学习. 快速入门第三节 获取当前的请求 ...

  9. SQL学习(二)之四大查询语句以及标准写法

    SQL四大查询语句——增删改查 增-INSERT INSERT INTO 表 (字段列表) VALUES(值列表) INSERT INTO `user_table` (`ID`, `username` ...

  10. 部署master节点组件

    部署master节点组件 master节点的组件有:kube-apiserver,kube-scheduler,kube-controller-manager 大致安装步骤如下: # mkdir -p ...