如何在样式标签内获取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

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>

Answer 2

看来您对问题的解决方案可能不是解决问题的最佳方法。如果你想用 css 修改动态元素，你可以为它们创建一个静态类：

.custom_class {

    display: none;

}

然后将类附加到某些元素element.classList.add("custom_class");而不是尝试修改现有类。

Answer 3

好吧，您可以像编辑其他<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 4

你不能在已经构建的“STYLE”标签中附加一些东西，但你可以像这样创建一个：

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

}