如何在样式标签内获取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");&nbsp; //this will get the class of attr data-namedocument.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">&nbsp; <div class="_18tvv4h"><a target="_blank" href=""><span>Done<span class="_qx8n3fw">..!</span></span></a></div>&nbsp; <div class="_8sfqbvd">have fun</div></div>

Answer 2

看来您对问题的解决方案可能不是解决问题的最佳方法。如果你想用 css 修改动态元素，你可以为它们创建一个静态类：.custom_class {&nbsp; &nbsp; display: none;}然后将类附加到某些元素element.classList.add("custom_class");而不是尝试修改现有类。

Answer 3

好吧，您可以像编辑其他<style />元素一样编辑 - 元素的内容。至少在任何中等现代的浏览器中（我相信> IE9）。例如：// Your JSvar prop= document.querySelectorAll('[data-name="header"]')[0].getAttribute("class");var class_name= "."&nbsp; + prop ;// New JSvar 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){&nbsp; // This is required for IE8 and below.&nbsp; style.styleSheet.cssText = css;} else {&nbsp; style.appendChild(document.createTextNode(css));}