Question

我有一个包含单个孩子的HTML标记，并且每个都有一个样式。

<div style="font-size:12px;color:red">
   <div style="color:blue">...</div>
</div>

我想合并这两个标签而不改变结果。我的意思是儿童风格必须打败父母风格。在这种情况下，结果必须是：

<div style="font-size:12px;color:blue">...</div>

我该怎么做？

修改

我有两个cssText，我想将它们合并为一个字符串，将它们作为样式attr。在上面的例子中，我有 var st1=font-size:12px;color:red;和var st2=color:blue; 我想将st1和st2合并为优先级。

Answer 1

html

<div id=parent style="font-size:12px; color:red">
   <div id="child" style="color:blue">text</div>
</div>

我添加了ID只是为了便于抓取这些元素，还有很多其他方法可以实现。

这里是JS

parentClass = document.getElementById("parent").style.cssText;
childClass = document.getElementById("child").style.cssText;

document.getElementById("parent").style.cssText = parentClass+childClass;

以非常容易理解的方式编写代码。现在，父元素将同时包含父类和子类。如果任何类重复，那么将应用子类的样式，因为它是最后写的（这就是CSS的工作方式）。

最后，如果需要，可以使用removeChild（）删除子元素。

Answer 2

在mergeStyledElements函数中使用jQuery选择器。将子项设置为primary，将父项设置为secondary，它将文本从子项推送到父项，删除子项，并将包含子项样式的样式组合在父项上。

var pushStyleStrings = function(str1, str2){
	let styleStr = '';	
	function format(str){
		let rtn = {};
		str = str.replace(/\s+|\;$/g,'').split(';');
		$.each(str,function(k,v){ 
			rtn[v.split(':')[0]] = v.split(':')[1];
		});
		return rtn;
	}
	function zipObj( obj1, obj2 ){
		rtn = obj2;
		$.each(obj1,function(k,v){
			rtn[k] = v;
		});
		return rtn;
	}
	$.each(zipObj(format(str1),format(str2)),function(k,v){
		styleStr += k + ":" + v + ";";
	});
	
	return styleStr;
	
}

var mergeStyledElements = function( primary, secondary ){
  
  let $primary = $(primary),
      $secondary = $(secondary),
      $style = pushStyleStrings( $primary.attr('style'), $secondary.attr('style')),
      $text = $primary.text();

      $secondary.html($text).css($style);
}

mergeStyledElements('#primary', '#secondary');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="secondary" style="font-size:12px;color:red;">
   <div id="primary" style="color:blue;">...</div>
</div>

如何合并两个div样式？

2 个答案: