使用 JavaScript 比较包含 css 属性的两个数组的两个子字符串
Comparing Two Substring of Two Arrays that contain css property using JavaScript
我正在尝试交换元素的css并将其显示给用户。例如：
#box{background-color:#ccc; float:left} // original css
然后，用户将bg-color更改为#008000，这将inline #box。
所以新的 CSS 将被#box{background-color:#008000; float:left}
以下是我为此使用的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Experimenting</title>
<style type="text/css">
#box{float:left; width:300px; height:300px; background-color:#008000; border:1px solid #ccc}
.panel{float:right; width:350px; padding:0 10px}
.panel h3{font-size:20px; line-height:30px; color:#666; font-weight:normal; font-style:italic; border-bottom:1px solid #CCC}
.panel p, h4{font-size:16px; color:#343434; padding:10px 0 10px 20px}
.panel h4{font-weight:normal; padding-top:0; text-align:center}
.panel p input{width:70px; height:20px; border:1px solid #000; padding:0 5px}
</style>
</head>
<body>
<div id="box" class="clearfix"><p>Hellloooo....</p></div>
<div class="panel">
<p>Background-color: <input type="text" class="color" id="boxbg" value="ffffff"></p>
<p>Border: <select type="text" id="brwid">
<option value="0px">0px</option>
<option value="1px" selected="selected">1px</option>
<option value="2px">2px</option>
<option value="3px">3px</option>
<option value="4px">4px</option>
<option value="5px">5px</option>
</select>
<select type="text" id="brstyl">
<option value="solid" selected="selected">Solid</option>
<option value="dotted">Dotted</option>
<option value="dashed">Dashed</option>
<option value="double">Double</option>
<option value="none">none</option>
</select>
<input type="text" class="color" id="brclr" value="d4d2cb"></p>
<input type="button" value="get css" id="code" />
</div>
<p id="demo" class="clearfix">Click the button to display the array values after the split.</p>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="jscolor/jscolor.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#boxbg').change(function(){
var boxbg = "#"+$('#boxbg').val();
$('#box').css('background-color',boxbg);
});
$('#brwid,#brstyl,#brclr').change(function(){
var brwid = $('#brwid').val();
var brstyl = $('#brstyl').val();
var brcolr = "#"+$('#brclr').val();
var bordr = brwid +" " + brstyl +" "+brcolr;
$('#box').css('border',bordr);
}
);
$('#code').click(function(){
var org_css = getElementChildrenAndStyles('#box');
var chng_css = document.getElementById('box').style.cssText;
org_css = org_css.replace('background-position:','');
org_css = org_css.replace('background-repeat:','');
var intIndexOfMatch;
while (intIndexOfMatch != -1){
// Replace out the current instance.
org_css = org_css.replace('initial initial;','');
// Get the index of any next matching substring.
intIndexOfMatch = org_css.indexOf( "initial initial;" );
}
//getting only css property
var open_curl = org_css.indexOf( "{" );
open_curl = open_curl+1;
var close_curl = org_css.indexOf( "}" );
var org_css = org_css.substring(open_curl,close_curl);
//alert(org_css+"<br>"+chng_css);
var start,end,prop,value,a;
document.getElementById("demo").innerHTML ="";
var old_css=org_css.split(";");
var inln_csss=chng_css.split(";");
document.getElementById("demo").innerHTML += "The original css: "+ org_css +"<br><br>The New css: ";
for(i=0; i<old_css.length-1;i++)
{
start = old_css[i].indexOf(":")+1;
end = old_css[i].length;
prop = old_css[i].substring(0,start);
value = old_css[i].substring(start,end);
//a = "The css is: "+old_css[i]+"<br>"+" property is- "+prop+" value is- "+value+"<br><br>";
for(j=0; j<inln_csss.length-1;j++)
{
var c_start = inln_csss[j].indexOf(":")+1;
var c_end = inln_csss[j].length;
var c_prop = inln_csss[j].substring(0,c_start);
var c_value = inln_csss[j].substring(c_start,c_end);
//var c_a = "The css is: "+inln_csss[j]+"<br>"+" property is- "+c_prop+" value is- "+c_value+"<br><br>";
//document.getElementById("demo").innerHTML += "The Changed Css are as follows:<br><br>"+c_a;
var new_arr = inln_csss.length;
alert("elements in arr: "+new_arr+" /"+prop);
if(c_prop==prop)
{
alert(prop+" === "+c_prop);
old_css[i] = inln_csss[j];
}
}
if(i==old_css.length-1)
{
document.getElementById("demo").innerHTML += old_css[i];
}
else{document.getElementById("demo").innerHTML += old_css[i]+";";}
}
});
function getElementChildrenAndStyles(selector) {
selector = selector.split(",").map(function(subselector){
return subselector + "," + subselector + " *";
}).join(",");
elts = $(selector);
var rulesUsed = [];
// main part: walking through all declared style rules
// and checking, whether it is applied to some element
sheets = document.styleSheets;
for(var c = 0; c < sheets.length; c++) {
var rules = sheets[c].rules || sheets[c].cssRules;
for(var r = 0; r < rules.length; r++) {
var selectorText = rules[r].selectorText;
var matchedElts = $(selectorText);
for (var i = 0; i < elts.length; i++) {
if (matchedElts.index(elts[i]) != -1) {
rulesUsed.push(rules[r]); break;
}
}
}
}
var style = rulesUsed.map(function(cssRule){
/*if ($.browser.msie) {
var cssText = cssRule.style.cssText.toLowerCase();
} else {*/
var cssText = cssRule.cssText;
//}
// some beautifying of css
return cssText.replace(/('{|;)'s+/g, "'$1'n ").replace(/'A's+}/, "}");
// set indent for css here ^
}).join("'n");
return style;
}
});
</script>
</html>
我无法比较这两个值，这些值被完美地存储，然后到 if 语句总是返回false即：
if(c_prop==prop){
old_css[i] = inln_csss[j];
}
使用 jQuery 的 .css() 方法：
element.css('background-color', '#008000');
它将负责为您设置element.style属性。
编辑：如果有许多元素需要更改 CSS 属性，则可以：
- 使用 CSS 选择器
- 传递元素数组而不是单个元素
广告 1.
以下内容将更改 <div id="container">...</div> 的所有子元素的背景颜色。
$('#container div').css('background-color', '#008000');
广告 2.
以下内容将执行相同的操作：
var elements = document.getElementById('container').getElementsByTagName('div');
$(elements).css('background-color', 'green');
有关示例，请参阅此 JSFiddle。
相关文章：
- 如何使用 node.js 比较两个 json 数组
- 用每小时的差值填充数组/列表-从下拉列表中给定两个时间值
- 访问$.ajax(）函数中的两个不同数组
- 正在更新mongod中两个对象内部的数组
- 如何使用javascript合并两个对象数组
- 比较包含多个值对的两个JavaScript数组
- jQuery对象从html表中查询为两个一维数组，用于Chartist图表
- 检查来自不同数组的两个元素的一个属性是否相等
- 如何在javascript中合并两个对象数组
- JavaScript - 合并两个对象数组并根据属性值删除重复数据
- 效率:整数数组的一个子集中两个项之间的最大差值
- 将两个值组合成extjs 4.1的形式
- 如何将中的两个geoJSON功能集合添加到两个层组中
- 在 JQuery 验证中验证多个“数组命名”文件输入和下拉列表
- 在一个区间之间生成两个随机数组
- 使用两个捕获组和JavaScript的replace(）函数
- 通过找到两个重复组之一的正则表达式组
- 从Javascript中的两个子数组中获取随机结果
- 如何在一个可选的非捕获组中创建两个捕获组
- paper.js:获取两个层/组的原始像素数据
