我已經在 textarea 中撰寫了 css，但需要驗證我正在撰寫的 css 的屬性和值是否正確？
我必須開發一個功能，例如實時 css 更改以及驗證 css 例如，如果我寫 .abc { text : text; } 那么這個文本不是一個有效的屬性，也不是一個有效的 css，所以我必須在 textarea 本身中顯示通知/錯誤，比如：這個文本不是一個有效的 css
html代碼：
<textarea id="txtCSS" name="txtCSS" rows="14" cols="50">
.FC{color:blue; margin: 40px; padding: 50px;}
.cf{color:blue; margin: 40px; padding: 50px; }
</textarea>
<label class="FC">Some Text</label>
<div class="cf">test Text</div>
JavaScript 代碼：
function render(value) {
let previewStyle = document.getElementById('previewStyle');
if (!previewStyle) {
addStyle(value);
} else {
previewStyle.innerText = value;
}
}
function addStyle(styles) {
/* Create style document */
const css = document.createElement('style');
css.type = 'text/css';
css.id = 'previewStyle';
if (css.styleSheet) {
css.styleSheet.cssText = styles;
} else {
css.appendChild(document.createTextNode(styles));
}
/* Append style to the tag name */
document.getElementsByTagName("head")[0].appendChild(css);
}
const text = document.getElementById('txtCSS');
text.addEventListener('input', (e) => {
const content = e.target.value;
render(content);
});
render(text.value);
參考圖片：
uj5u.com熱心網友回復：
你可以像下面這樣嘗試它應該可以作業
const validatorURL = 'https://jigsaw.w3.org/css-validator/validator'
'?uri=http://www.w3.org/&profile=css3&output=json';
fetch(validatorURL)
.then(response => response.json())
.then(results => console.log(results))轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/441188.html
下一篇：當父級關閉時關閉導航的所有子級