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

 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. 自定义Dialog,从下面弹出

    Window window= getWindow(); 只要 打开一个Activity 就有一个窗口存放这个Activity ,手机又很多个窗口,不只是一个窗口 import android.app. ...

  2. 安卓系统浏览器中select下拉按钮无法弹出选择面板奇怪问题解决

    今天遇到个让人崩溃的问题: 平台: 安卓 4.0 描述: 使用 appcan 开发 hybrid 应用,手机上点击下拉选框按钮无法弹出选择面板. 说明: 发现 webkit 内核 position:f ...

  3. Anton and Tree

    Anton and Tree 题目链接:http://codeforces.com/contest/734/problem/E DFS/BFS 每一次操作都可以使连通的结点变色,所以可以将连通的点缩成 ...

  4. [SOJ]统计数字

    Description 某次科研调查时得到了n个自然数,每个数均不超过1500000000(1.5*10^9).已知不相同的数不超过10000个,现在需要统计这些自然数各自出现的次数,并按照自然数从小 ...

  5. JS中的Replace只会替换第一处解决办法

    解决这个问题只需将replace的第一个参数使用正则的方式即可,代码如下: var reg = new RegExp(",","g"); var str = & ...

  6. 关于PHPAPI ZEND_API TSRM_API宏的定义

    在PHP源码中,我们可以见到诸如PHPAPI ZEND_API TSRM_API等xxx_API(当然还有其他格式的)这样的宏 关于它们的定义都是类似于 #if defined(__GNUC__) & ...

  7. python下载时报错 Errno 10060] A connection attempt failed because the connected party did not properly respond after a period of time

    def downloadXml(isExists,filedir,filename): if not isExists: os.mkdir(filedir) local = os.path.join( ...

  8. Winform制作圆弧panel

    原理就是手动去画边框留出四个角 然后绘制四张圆弧的图片到panel上 public class ArcPanel : Panel { protected override void OnPaint(P ...

  9. 解决WordPress邮件无法发送问题

    1 安装插件 Wp Mail Bank 2 开启第三方SMTP服务 以163为例:设置 - POP3/SMTP/IMAP  开启,会要求设置授权码 3 配置插件:Wp Mail Bank - sett ...

  10. 九章lintcode作业题

    1 - 从strStr谈面试技巧与代码风格 必做题: 13.字符串查找 要求:如题 思路:(自写AC)双重循环,内循环读完则成功 还可以用Rabin,KMP算法等 public int strStr( ...