0
餘米試圖換一個元素的CSS，並顯示給用戶.. CSS屬性如子串的兩個二陣列：比較包含使用JavaScript
#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];
}
不錯的想法@kamituel但我想顯示該代碼給用戶..基本上即時創建一個界面，其中用戶可以在其中修改元素的樣式，然後獲取將包括更改屬性和舊代碼 – WannaLearn
@ WannaLearn - 是的，它更乾淨，因爲你不會將JS和CSS混合在一起。如果它解決了你的問題，請接受我的答案。 – kamituel
例如：用戶可以改變顏色，但不改變浮點，高度或寬度，所以當用戶改變顏色時，用戶將得到那些不可更改的顏色。希望你明白我需要的信息 – WannaLearn