浏览HTMLElement中的每个CSS值，合并CSS样式

Go thru each CSS value in a HTMLElement, merge CSS styles

本文关键字：CSS 合并 样式 HTMLElement 浏览      更新时间：2023-09-26

我想创建一个循环，这样我就可以遍历元素中定义的所有CSS属性。我的目标是创建一个合并两个元素样式的函数。

<span id="a1" style="font-family:verdana;">Hello</span>
<span id="a2" style="font-size:15;">World</span>​

JS函数看起来像这样：

function mergeStyle (obj,target){
    $.each(test.style.CSSStyleDeclaration,function(){ // This will not work?
       // Add to target
    })
    return;
};

​

我建议使用类，因为您的需求听起来不是一个好的设计。如果你仍然想要它，这应该是有效的：

$.fn.mergeCSS = function(other) {
  var $this  = $(this),
      $other = $(other),
      style  = $other.get(0).style;
  $.each(style, function(i, name) {
    $this.css(name, style[name]);
  });
  return this;
};

元素的.style属性包含其样式；CSSStyleDeclaration是.style的构造函数，它不是特定于元素的。

用法：

$("<p style='color:green'>").mergeCSS("<p style='background-color:red'>");
// <p style='color: green; background-color: red; '>

它改变并返回第一个元素。

在最简单的形式中，如果你只想应用从a到b的样式，那么你可以尝试一下。

function mergeStyle (obj,target){
    target.style.cssText = target.style.cssText + ";" + obj.style.cssText;
};
mergeStyle($('#a2')[0], $('#a1')[0]);

工作演示-http://jsfiddle.net/rDdMu/1/

我想出了一个适合我的解决方案：

function mergeStyle (obj,target){
    for(var i = 0; i<obj.style.length; i++){
        var stylename = obj.style[i];
        if(target.style[stylename]=="")        
           target.style[obj.style[i]] = obj.style[stylename];
        };
    };
};

​

相关文章：