我想知道,有什么方法可以从一个CSS文件中排除或提取某些特定的CSS属性?
例如,我有一个style.css文件,我只想从其中将所有背景和颜色属性提取到另一个CSS文件中。有可能吗?
TIA
答案 0 :(得分:1)
终于找到了解决方案! 这种方法可行,但需要更多调整和改进。
let at_data='';
var css=[];
var openFile=function(event) {
var input=event.target;
var reader=new FileReader();
reader.onload=function() {
var text=reader.result;
var node=document.getElementById('output');
//node.innerText=text;
at_data=reader.result.substring();
at_data.split('}').map(item=> {
var item2=item.trim();
var item3=(item2 +"}");
css.push(item3)
}
);
css.pop();
//console.log(css);
}
;
reader.readAsText(input.files[0]);
}
;
//console.log(css)
function getCss (property,
value) {
const filter=css.filter(function(item, index) {
const filter2=item.split('{')[1].split(';').filter(function(item2, index) {
if(item2.trim().startsWith(property)) {
if(item2.split(':')[1] !==undefined) {
if(item2.split(':')[1].trim().startsWith(value)) {
return item2
}
}
}
}
);
return item.includes(filter2[0]);
}
);
var data1='';
filter.map(data=> {
data1 +='<p>'+data+'</p>'
}
);
data1 +='';
document.getElementById('article').innerHTML=data1;
}
var btn=document.getElementById('getStyle');
btn.addEventListener('click',
function () {
let pro=document.getElementById('property').value, value=document.getElementById('value').value;
getCss(pro, value)
}
);
<input type='file' onchange='openFile(event)'><br>
<div id='output'></div>
<input type="text" id='property' value='' placeholder="property">
<input type="text" id='value' value='' placeholder="value">
<button id="getStyle">Click</button>
<article id="article"></article>