如何在style标记中获取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>

我试图在style标签中获取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

好吧，您可以像编辑其他元素一样编辑<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 3

你不能在已经构建的"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));
}

Answer 4

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

.custom_class {
display: none;
}

然后用CCD_ 3将类附加到一些元素，而不是试图修改现有类。