Например, мой html-код выглядит следующим образом:

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>add style inline in js</title>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <div class="one">
     <div class="two">
        <a href="#">link</a>
     </div>
  </div>

  <script src="js/my-scripts.js"></script>
</body>
</html>

Я хочу выбрать элементы и стилизовать их в файле my-scripts.js, например css:

.one .two a:hover{color:red;}

У меня есть образец кода jquery:

function injectStyles(rule) {
  var div = $("<div />", {
    html: '&shy;<style>' + rule + '</style>'
  }).appendTo("body");    
}

$("button").on("click", function() {
  injectStyles('a:hover { color: red; }');
});

https://css-tricks.com/snippets/javascript/inject-new-css-rules/

Но я хочу сделать это без использования jquery и без использования кнопки. (Применить стили после загрузки файла сценария)

Я хочу определить свой код css в js и определить каждый отдельно как «встроенный» для каждого элемента.

Спасибо профессорам

-2
SR Dev 9 Окт 2021 в 21:35

2 ответа

Лучший ответ

Вы можете создать класс шаблона в своем файле css следующим образом

.colorOnHover a:hover {
  color: red;
}

А затем вы можете использовать document.querySelector, чтобы получить элемент и добавить colorOnHover в classList этого элемента.

// your js file
const element = document.querySelector(''); // pass in the ID or the class of the element you want to add the changes to
(function() {
    element.classList.add('colorOnHover');
})();
// this will add `colorOnHover` class to the classList and apply the css defined to the class in your css file.

Не забудьте связать файл javascript и css (если есть) с помощью <script src = "pathHere" defer></script> и <link rel = 'stylesheet' href = "pathHere>" соответственно

update : поскольку оператор не хотел использовать querySelector

Вы можете использовать document.createElement('style') и добавить его в html-файл, это будет похоже на вставку тега вручную

(function() {
    const styleEl = document.createElement('style');
    styleEl.textContent = '.one .two a:hover{color:red;}';
    document.head.append(styleEl);
    console.log('added new style tag');
})();
0
EJBEAN 9 Окт 2021 в 19:10

Вот как вставить CSS в тег <style>:
Код JS и jQuery:

function injectStyles(rule) {
  $("style").append(rule);
}

$("button").on("click", function() {
  injectStyles('.one .two a:hover{color:red;}');
});

HTML код:

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>add style inline in js</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <div class="one">
     <div class="two">
        <a href="#">link</a><br>
       <button type="button">Make the link hover Red</button>
     </div>
  </div>

  <script src="js/my-scripts.js"></script>
</body>
</html>
0
Mohamed Reda 9 Окт 2021 в 19:34