如果已经将某个元素的样式设定好了,又想改变,可以利用样式框架:

 function setStyle(obj,attr,value){
obj.style[attr]=value;//注意此处attr的写法,点用中括号代替
}

然后就可以调用该函数对样式进行改写了,但是这样的话,想改变多个运算样式的时候,需要调用多次这个函数,若不想多次调用函数,该怎么办呢?

这时可以利用json,

function setStyle(obj,json){
 var attr='';
for(attr in json){
obj,style[attr]=json[attr];
}
}
window.onload=function(){
var oDiv=doucment.getElementsByTagName('div')[0];
setStyle(oDiv,{width:200px,height:200px,background:yellow});//注意大括号内用逗号分隔
}

JS 之设置元素样式的改变,可以利用样式框架的更多相关文章

  1. js中设置元素class的三种方法小结

     一.el.setAttribute('class','abc'); 代码如下: .abc { background: red; } test div var div = document.getEl ...

  2. JS如何设置元素样式的方法示例

    <div id="box"></div> <script> var box = document.getElementById("bo ...

  3. FineReport——JS二次开发(CSS改变控件样式)

    FR提供一些选择器,可以改变部分控件的样式,那么对于如何书写自己的css: 可以自己写css文件导入,也可以在页面加载结束事件中添加JS方法来改变css样式. 以文本框为例: 书写css文件,保存至% ...

  4. 关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转

    还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p ...

  5. js动态设置padding-top遇到的坑

    我想通过js动态设置元素padding-top的百分比值:以下几种都是无法设置成功的: // setAttribute设置padding-top并且转换为百分比 imageBox.setAttribu ...

  6. js学习进阶-元素获取及样式设置

    var imgs = document.querySelectorAll("article img"); 获得article元素的直接或间接子孙的所有img元素, <arti ...

  7. 如何通过源生js获取一个元素的具体样式值 /* getCss:获取指定元素的具体样式的属性值 curElement:[dom对象] attr:[string] */

    昨天的博客些的真的是惨不忍睹啊!!!但是我的人生宗旨就是将不要脸的精神进行到底,所以,今天我又来了.哈哈哈哈哈! 方法一:元素.style.属性名:(这个有局限性--只能获取行内样式的值,对于样式表或 ...

  8. jQuery使用之(二)设置元素的样式

    css是页面不能分隔的部分,jQuery中也提供了一些css相关的实用的办法.前面章节中有使用过 addClass()为元素添加css样式风格.本节主要介绍jQuery如何设置页面的样式风格.包括添加 ...

  9. js设置元素不能编辑

    js设置元素不能编辑 $("#startLocation").attr("readOnly",true); js设置元素可以编辑 $("#startL ...

随机推荐

  1. jQuery基础教程第四版练习答案

    第二章 1. $('#selected-plays>li>ul>li').nextAll().addBack().addClass('special'); 2. $('table') ...

  2. 利用VR技术,走进白宫,走进奥巴马

    奥马巴卸任演讲由诺基亚OZO全程360° VR直播,并不是每个人都能去白宫拜访,一窥白宫内部的模样,更不可能有多少人有机会在奥马巴面前听他讲讲他的家.   现在前任总统巴拉克奥巴马以及其夫人米歇尔奥巴 ...

  3. php核心编程

    搭建web服务器的环境(配置PHP的工作环境): 首先要配置php,在Apache的配置文件夹中httpd.conf中配置 1把php配置成Apache的一个功能模块 LoadModule php5_ ...

  4. Java中不定参的使用规则

    Java中有时候会使用到不定参数,它的使用规则有2项: 一个方法中只能使用一个不定参数. 不定参数必须是方法中最后一个参数. 不定参数在传入的过程中会行成一个数组传入,如果不会放在最后一个,虚拟机无法 ...

  5. CodeForces 670A Holidays

    简单题. #pragma comment(linker, "/STACK:1024000000,1024000000") #include<cstdio> #inclu ...

  6. mac 搭建node 开发环境记录

    安装homebrew: enter 键 后 输入电脑密码 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/i ...

  7. requests模拟登录

    #coding:utf-8 #author:jwong import requests import urllib2 import re from bs4 import BeautifulSoup a ...

  8. Java线程小记

    线程是程序内部不同的执行分支,实现多线程主要有两种方式:继承自Thread类或实现Runnable接口,其实Thread类也是实现了Runnable接口,基于Java的单继承机制,我们建议使用实现Ru ...

  9. 按键精灵http.定义getWeb

    Function 取网页源码(URL) Set objXML=CreateObject("Microsoft.XMLHTTP") objXML.Open "Get&quo ...

  10. Bower使用教程(限window)

    注意:其实用法大致相同,但是为了标准一些,这里还是标注一下window平台 Bower的使用教程非常简单,官网讲的很详细.这里再次赘述一遍. 使用bower,首先要知道bower是干什么的:bower ...