Как обратиться к классу в css через js

Как обратится к классу, который находится внутри другого класса

Доброе утро!) Подскажите пожалуйста, у меня .product__item используется в нескольких блоках, как указать в js, что добавлять класс нужно лишь тому у кого родитель .product-page-items ?? Такая структура html: Мой js:

$('.icon-th-list').on('click', function()

>); Но он добавляет класс всем блокам, которые содержат внутри классы product__item
Отслеживать
задан 1 дек 2019 в 6:37
Даша Новикова Даша Новикова
633 1 1 золотой знак 8 8 серебряных знаков 20 20 бронзовых знаков

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

1 дек 2019 в 8:11

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Это не работает по двум причинам. $(this) — это тот элемент, который запустил функцию (на который кликнули). .parent(«селектор») — возвращает родительский элемент, если он совпадает с селектором, или сам элемент, если родитель не подходит. А это в любом случае в логическом контексте будет true.

Но даже если бы получилось правильно отфильтровать блоки с нужным родителем, затем всё всё равно добавляете класс всем: $(‘.product__item’).addClass(‘list’);

Можно было проверять родителя каждого блока, но есть простые CSS-селекторы:
• .class1 .class2 — через пробел, означает, что второй может быть где угодно внутри первого,
• .class1 > .class2 — только те class2, которые находятся непосредственно среди дочерних элементов class1. Чаще всего используется вариант с пробелом, т.к. этот придется переделать, если в будущем захочется изменить разметку.

$('.icon-th-list').on('click', function() < $('.product-page-items .product__item').addClass('list'); >);

.list

 . 
Покрасить
 
 
Не покрасить
 

А «ручная» проверка родителей выглядела бы так:

$('.icon-th-list').on('click', function() < // Функция вызывается в контексте $('.icon-th-list'). Здесь $(this) — '.icon-th-list' $('.product__item').each(function()< // У этой функции контекст вызова другой: // Здесь $(this) - очередной '.product__item' внутри каждой проверки. if( $(this).closest('.product-page-items').length >0 ) < // можно без >0 — любое число кроме 0, в логическом контексте будет true // $(this).parent().hasClass('.product-page-items') $(this).addClass('list'); > >); >);

.list

 . 
Покрасить
 
 
Не покрасить
 

Как создать класс СSS с помощью JS?

Есть файл js, в котором написан плагин, где используются CSS классы, к которым нет доступа. Как можно с помощью js добавить или изменить параметры этого класса?

card.addClass('card--collection'); 

Этот класс мне нужно изменить. Его значение width , которое прописано в СSS.
Отслеживать
3,076 2 2 золотых знака 11 11 серебряных знаков 36 36 бронзовых знаков
задан 16 дек 2021 в 17:10
47 6 6 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Если очень нужно отредактировать сами правила, то можно работать с CSSOM напрямую:

function test() < const i = [. document.styleSheets[0].cssRules].findIndex(e =>e.selectorText === ".card--collection") const myClassRule = document.styleSheets[0].cssRules[i]; myClassRule.style.width = "10.1em"; >

.card--collection

 test

Отслеживать
ответ дан 16 дек 2021 в 18:07
4,396 23 23 золотых знака 22 22 серебряных знака 25 25 бронзовых знаков
Немного не понял, а как оно поймет к какому именно классу обратиться?
16 дек 2021 в 18:23
Это уже работа с коллекциями — я привел упрощенный пример в ответе.
16 дек 2021 в 18:41

Команда может выглядеть так:

card.setAttribute('class', 'card--collection') 

Отслеживать
51.6k 200 200 золотых знаков 61 61 серебряный знак 242 242 бронзовых знака
ответ дан 16 дек 2021 в 17:17

Мне нудно для класса card—collection изменить свойства. Тоесть у него в CSS прописано width:19.1em; а мне нужно принудительно ему задать width:10.1em.

16 дек 2021 в 17:20
document.querySelector(‘.card—collection’).style.width = ‘10.1em’;
16 дек 2021 в 17:45

@СергейГуртовой инлайн стили переписывают свойства классов. Вы можете задать следующим способом: card.style.width = ‘10.1em’.

16 дек 2021 в 17:45

document.querySelector(‘.card—collection’).style.width = ‘10.1em’; – Error: Cannot read properties of null (reading ‘style)

16 дек 2021 в 17:52
Быть может вы запускаете скрипт до прогрузки страницы? Я повторил код у себя, все работает
16 дек 2021 в 17:58

• javascript
• css

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Курсы javascript

Здравствуйте, подскажите как обращаться по классу? documentGetElementByClass нету, а в сети большая часть примеров нерабочие. Подскажите что делать?

08.12.2012, 17:47

I am Student

Регистрация: 16.12.2011

Сообщений: 4,415

08.12.2012, 18:21

Регистрация: 02.05.2010

Сообщений: 68

Суди по записям на других форумах, не все брузеры это поддерживают

08.12.2012, 18:33

I am Student

Регистрация: 16.12.2011

Сообщений: 4,415

shtopor, либо забейте на ие меньше 8 , либо используйте jquery.
или так

function Cls(FindClass) < var allTag, allElem, arrE = [], i; if(document.getElementsByClassName)< return document.getElementsByClassName(FindClass); >allElem = document.body.getElementsByTagName('*'); i = allElem.length; while(i--)< if(allElem[i].className == FindClass) arrE.push(allElem[i]); >; return arrE; >

08.12.2012, 19:29

Регистрация: 02.05.2010

Сообщений: 68

Спасибо большое, забыл про getElementsByTagName)) А как заменит тег? innerHTML отвечает только за содержимое.

Document.getElementsByClassName()

Возвращает массивоподобный (итерируемый) объект всех дочерних элементов, соответствующих всем из указанных имён классов. В случае вызова по отношению к объекту ‘document’, поиск происходит по всему документу, включая корневой элемент. Вызывать getElementsByClassName() можно также применительно к любому элементу: возвращены будут лишь те элементы, которые являются потомками указанного корневого элемента и имеют при этом указанные классы.

Синтаксис

var elements = document.getElementsByClassName(names); // или: var elements = rootElement.getElementsByClassName(names);

• В «elements» будет текущая HTMLCollection найденных элементов.
• «names» — строка, состоящая из списка имён искомых классов; имена классов разделяют пробелами.
• getElementsByClassName может быть вызвана по отношению к любому элементу, не только для документа целиком. («document»). Элемент, по отношению к которому осуществляется вызов, используется для целей поиска в качестве корневого элемента.

Примеры

Получить все элементы класса ‘test’:

.getElementsByClassName("test"); 

Получить все элементы, для которых заданы класс ‘red’ и класс ‘test’:

.getElementsByClassName("red test"); 

Получить все элементы класса ‘test’, являющиеся дочерними для элемента с ID ‘main’:

.getElementById("main").getElementsByClassName("test"); 

Мы также можем использовать методы из Array.prototype по отношению к любой HTMLCollection , передавая коллекцию в качестве значения this метода. Код в примере найдёт все элементы ‘div’ с классом ‘test’:

var testElements = document.getElementsByClassName("test"); var testDivs = Array.prototype.filter.call( testElements, function (testElement)  return testElement.nodeName === "DIV"; >, ); 

Получение элементов класса ‘test’

Ниже приведён пример наиболее употребительного способа использования данного метода.

doctype html> html> head> meta charset="UTF-8" /> title>Documenttitle> head> body> div id="parent-id"> p>hello word1p> p class="test">hello word2p> p>hello word3p> p>hello word4p> div> script> var parentDOM = document.getElementById("parent-id"); var test = parentDOM.getElementsByClassName("test"); //test is not target element console.log(test); //HTMLCollection[1] var testTarget = parentDOM.getElementsByClassName("test")[0]; //hear , this element is target console.log(testTarget); //
hello word2 script> body> html> 

Спецификации

Specification
DOM Standard # ref-for-dom-document-getelementsbyclassname①

Совместимость с браузерами

BCD tables only load in the browser

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.