從 TextArea 元素附加 CSS 樣式元素

Question

我有一個帶有 TextArea 和標簽的 HTML 頁面，我需要在 TextArea 中編寫 CSS 類並通過標簽使用它：

<textarea id="txtCSS" name="txtCSS" rows="4" cols="50">
    .FC{color:green;}
</textarea>

<label class="FC">Some Text</label>

怎么做。

Answer 1

嘗試這個

 const css = function() { const [_,clas,css] = document.getElementById("txtCSS").value.match(/\\.(\\w+){(.*)}/) document.querySelector("."+clas).style=css; } document.getElementById("txtCSS").addEventListener("input",css) css()

 <textarea id="txtCSS" name="txtCSS" rows="4" cols="50"> .FC{color:green;} </textarea> <label class="FC">Some Text</label>

Answer 2

將 textarea 的值附加到style標簽中。

1. 在 textarea 上觀看事件input以收集新內容
2. 嘗試通過 id previewStyle查詢style標簽，如果存在，那么我們只附加文本，否則，我們必須創建一個新的style標簽並將內容附加到這個標簽中。

這是演示

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);

請考慮使用庫替換當前 textarea 一些高級代碼突出顯示，例如：

• tu-editor
• 高手
• 等等。