Как применить стиль к блоку если у другого блока определенный стиль?

Question

[Minusator]

Прошу помощи в решении такой задачи

Есть такой html

<div class="block1">
<div class="block2" style="color:#FFF">
</div>
</div>

Как применить стиль для block1 если у block2 style="color::#FFF"?
К примеру чтобы у block1 был style="font-size:16px"

Comments

[Sergei Nazarenko]

Не совсем понятно что ты хотите ? чтоб у block2 чтоб при этом у вложенного блока не менялся размер шрифта ? ну так переопределите его и все дела. Читайте про каскадность и приоритеты стилей https://webref.ru/course/css-basics

[Minusator]

если есть у block2 style="color:#FFF" то применяем стиль к block1

[Сергей delphinpro]

Как вы такие извраты придумываете? Ну сделайте нормально – добавьте класс родителю

<div class="block1 block1_bg_white">
  <div class="block2">
  </div>
</div>

.block1_bg_white {
  font-size: 16px;
  .block2 {
    background: white;
  }
}

[Minusator]

Сергей delphinpro, если бы я хотел просто добавить класс я бы так и сделал. С CSS у меня все в порядке. Если вам нужно подробности зачем мне такие извраты то пожалуйста:
Имеем таблицу с такой версткой

<div class="block1">
<div class="block2" style="color:#FFF">
</div>
<div class="block1">
<div class="block2" style="color:#FF0">
</div>
<div class="block1">
<div class="block2" style="color:#FFF">
</div>
<div class="block1">
<div class="block2" style="color:#000">
</div>

Мне нужно добавить стиль к block1 только тогда когда у block2 есть атрибут style="color:#FFF"
Когда вы добавляете сразу стиль к block1 мы добавим его ко всем блокам содержащий класс block1

Что вы делаете этим кодом? Вы берете и напрямую и прописываете класс к block1 и применяете стиль в CSS.
Во первых задача на JS, во вторых по вашему коду вы примените стиль font-size ко всем block1, а не тем как из соей задачи со style="".

<div class="block1 block1_bg_white">
  <div class="block2">
  </div>
</div>

.block1_bg_white {
  font-size: 16px;
  .block2 {
    background: white;
  }
}

[Сергей delphinpro]

Minusator, нет.
вот этот код style="color:#FFF" не появляется из ниоткуда. Он прописывается по какому-то условию. Никто не мешает, используя это же условие задать доп класс родителю.

Когда вы добавляете сразу стиль к block1 мы добавим его ко всем блокам содержащий класс block1

Если вы посмотрите внимательно на код, то увидите, что не всем будет добавлятся. Но я покажу подробнее.

<div class="block1 block1_white">
<div class="block2">
</div>
<div class="block1 block1_yellow">
<div class="block2">
</div>
<div class="block1 block1_white">
<div class="block2">
</div>
<div class="block1 block1_black">
<div class="block2">
</div>

.block1_bg_white { font-size: 18px; }
.block1_bg_white .block2 { color: white }
.block1_bg_yellow .block2 { color: yellow }
.block1_bg_black .block2 { color: black }

Answer 1

[Алексей Дубровин]

let element = document; // любая дом нода
//Для того чтобы получить установленные стили с CSS:
getComputedStyle(element); // возвращает объект с стилями.

//Для того чтобы получить стили встроенные в HTML
element.style.color

// условия в js
if(true){};

Если вы не знаете как работает IF, то всё что выше в принципе бесполезно.

Answer 2

[oink]

Если я правильно понял суть вопроса, та примерно так

let block = document.getElementsByClassName('block1');
block.style.fontSize = '16px';

если у вас используется jQuery, то так:

let block = $('block1');
block.css('font-size', '16px');

Но если есть возможность редактировать CSS или хотя бы HTML, то лучше бы там это делать.

Comments

[Minusator]

вы сразу применяете стиль к block1 а нужно проверить если стиль style="color:#fff" у block2

[oink]

Minusator, пардон, не понял это из оригинального вопроса. В таком случае, да, как Алексей Дубровин советует.