如何在樣式標簽內獲取 javascript 變量

Question

我在這

 var prop= document.querySelectorAll('[data-name="header"]')[0].getAttribute("class"); var class_name= "." + prop;

 class_name { display: none; }

 <div class="_69x2sms" data-name="header"> <div class="_18tvv4h"> <a target="_blank" href=""> <span>Done <span class="_qx8n3fw">..!</span> </span> </a> </div> <div class="_8sfqbvd">have fun</div> </div>

我正在嘗試獲取 JavaScript 變量，即樣式標簽內的“class_name”，代碼放在這里，而 class="_69x2sms" 在這里是動態的

<div class="_69x2sms" data-name="header">
  <div class="_18tvv4h">
    <a target="_blank" href="">
        <span>Done
            <span class="_qx8n3fw">..!</span>
        </span>
    </a>
    </div>
  <div class="_8sfqbvd">have fun</div>
</div>

<script type="text/javascript">
    var prop= document.querySelectorAll('[data-name="header"]')[0].getAttribute("class");
    var class_name= "."  + prop ;
</script>

<style>

class_name {
    display: none;
}   
</style> 

Answer 1

好吧，您可以像編輯其他元素一樣編輯<style />元素的內容。 至少在任何中等現代的瀏覽器中（我相信> IE9）。

例如：

// Your JS
var prop= document.querySelectorAll('[data-name="header"]')[0].getAttribute("class");
var class_name= "."  + prop ;
// New JS
var style = document.getElementsByTagName('style')[0];
style.textContent += class_name + ' { display: none; }'

Answer 2

你不能 append 一些東西在已經建立的“風格”標簽，但你可以創建一個這樣的：

var css = class_name +'{ display: none }',
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');

head.appendChild(style);

style.type = 'text/css';
if (style.styleSheet){
  // This is required for IE8 and below.
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

Answer 3

看來您解決問題的方法可能不是 go 關於它的最佳方法。 如果你想用 css 修改動態元素，你可以為它們創建一個 static class：

.custom_class {
    display: none;
}

然后 append 將 class 與element.classList.add("custom_class"); 而不是試圖修改現有的類。

Answer 4

 let class_name = document.querySelector('[data-name="header"]').getAttribute("class"); //this will get the class of attr data-name document.querySelector('.' + class_name).style.display = 'none'; //this will set it's display to none; //You can directly also do so ↓↓-- //document.querySelector('[data-name="header"]').style.display = 'none';

 <div class="_69x2sms" data-name="header"> <div class="_18tvv4h"><a target="_blank" href=""><span>Done<span class="_qx8n3fw">..!</span></span></a></div> <div class="_8sfqbvd">have fun</div> </div>