как получить 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" - Dynami c здесь

<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", но вы можете создать его следующим образом:

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 об этом. Если вы хотите изменить элементы dynamici c с помощью css, вы можете создать для них класс stati c:

.custom_class {
    display: none;
}

, а затем добавить класс к некоторым элементам с помощью element.classList.add("custom_class"); вместо пытаясь изменить существующие классы.

Answer 4

Ну, вы можете редактировать содержимое <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; }'