将javascript计算样式从一个元素设置为另一个元素

所以我试图复制适用于一个元素的所有样式(class / id / tagName / attribute等).
到目前为止,我发现我可以复制元素的计算样式,
只有一个问题… Couldend将它应用于其他元素; /

或diffrend方式复制所有样式.

(这是我得到的:/)
http://jsfiddle.net/8KdJd/2/

//queriks mode + minor changes to retrive the computed style
function getCS(el)
{
    if (el.currentStyle)
        var y = el.currentStyle;
    else if (window.getComputedStyle)
        var y = document.defaultview.getComputedStyle(el,null);
    return y;
}
function setCS(el,cs)
{
    if (el.currentStyle)
    {

        el.currentStyle = cs;
        el.style = cs;
    }
    else if (window.getComputedStyle)
    {el.style = cs 
    }

}


var myLink = document.getElementById('myLink');
var anotherLink = document.getElementById('anotherLink');

var CS_myLink = getCS(myLink);
setCS(anotherLink,CS_myLink);

解决方法

更新:
正如@ icl7126建议的那样,这是一个更短的版本,实际上用于相同的用途.
好的一点是要记住,如果没有预先编译,这段代码将无法在大多数/旧版浏览器上运行.

原创(ES 2017):

function copyNodeStyle(sourceNode,targetNode) {
  const computedStyle = window.getComputedStyle(sourceNode);
  Array.from(computedStyle).forEach(key => targetNode.style.setProperty(key,computedStyle.getPropertyValue(key),computedStyle.getPropertyPriority(key)))
}

预编译(ES 5):

function copyNodeStyle(sourceNode,targetNode) {
  var computedStyle = window.getComputedStyle(sourceNode);
  Array.from(computedStyle).forEach(function (key) {
    return targetNode.style.setProperty(key,computedStyle.getPropertyPriority(key));
  });
}

而已!我知道了 :)

我看到很多人都看到这个问题,
所以下面是更详细和干净的代码.

var copycomputedStyle = function(from,to){
    var computed_style_object = false;
    //trying to figure out which style object we need to use depense on the browser support
    //so we try until we have one
    computed_style_object = from.currentStyle || document.defaultview.getComputedStyle(from,null);

    //if the browser dose not support both methods we will return null
    if(!computed_style_object) return null;

        var stylePropertyValid = function(name,value){
                    //checking that the value is not a undefined
            return typeof value !== 'undefined' &&
                    //checking that the value is not a object
                    typeof value !== 'object' &&
                    //checking that the value is not a function
                    typeof value !== 'function' &&
                    //checking that we dosent have empty string
                    value.length > 0 &&
                    //checking that the property is not int index ( happens on some browser
                    value != parseInt(value)

        };

    //we iterating the computed style object and compy the style props and the values 
    for(property in computed_style_object)
    {
        //checking if the property and value we get are valid sinse browser have different implementations
            if(stylePropertyValid(property,computed_style_object[property]))
            {
                //applying the style property to the target element
                    to.style[property] = computed_style_object[property];

            }   
    }   

};

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


什么是深拷贝与浅拷贝?深拷贝与浅拷贝是js中处理对象或数据复制操作的两种方式。‌在聊深浅拷贝之前咱得了解一下js中的两种数据类型:
前言 今天复习了一些前端算法题,写到一两道比较有意思的题:重建二叉树、反向输出链表每个节点 题目 重建二叉树: 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树。假设输入的前序遍历和中序遍历的结果中都不含重复的数字。例如输入前序遍历序列 {1,2,4,7,3,5,6,8} 和中序遍历序列 {
最近在看回JavaScript的面试题,this 指向问题是入坑前端必须了解的知识点,现在迎来了ES6+的时代,因为箭头函数的出现,所以感觉有必要对 this 问题梳理一下,所以刚好总结一下JavaScript中this指向的问题。
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)