Как можно использовать псевдокласс в jQuery

@masli · Регистрация: 27.03.2013

Студворк — интернет-сервис помощи студентам

CSS
1
2
3
4
5
6
7
8
9
10
11
12
.checkbox + label:before {
    content: '';
    position: absolute;
    top: -4px;
    left: 0;
    width: 50px;
    height: 26px;
    border-radius: 13px;
    background: #CDD1DA;
    box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
    transition: .2s;
}

как это перевести в jquery ?

наподобие вот такого

JavaScript
1
2
3
4
5
6
7
8
9
10
11
   applyStyle('.checkbox + label', {
            'position': 'relative',
            'padding': '0 0 0 60px',
            'cursor': 'pointer' /*тип курсора, рпи наведении
            на текущий селектор*/
        });
 
/*Применение стиля*/
function applyStyle(selector, style) {
    $(selector).css(style);
}

@sad67man · 17.03.2019, 01:19

masli, :before и :after в js недоступны. Можно сделать через классы к примеру.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.checkbox + label:before {
    content: '';
    position: absolute;
    top: -4px;
    left: 0;
    width: 50px;
    height: 26px;
    border-radius: 13px;
    background: #CDD1DA;
    box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
    transition: .2s;
}
 
.checkbox.active + label:before {
  'cursor': 'pointer';
}

JavaScript
1
$('.checkbox').addClass('active');

Либо откажитесь от before и сделайте отдельный элемент.

@Mr_Sergo · 17.03.2019, 07:09

Сообщение от sad67man

:before и :after в js недоступны

Да нее... доступны -> https://codepen.io/Mr_Sergo/pe... itors=1100

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<span>Наведите мышь на элемент</span>
<ul>
    <li>элемент 1</li>
    <li>элемент 2</li>
    <li>элемент 3</li>
</ul>
 
<script>
    applyStyle({
        style : `
            li:hover::before {content: "Это ";}
            li:hover::after {content: " \\00AB";}
        `
    });
 
    function applyStyle(obj){
        $('html > head').append(`<style id="myStyle1">${obj.style}</style>`);
    }
</script>

@sad67man · 17.03.2019, 07:20

Сообщение от Mr_Sergo

Да нее... доступны

Ну если только так)

@Mr_Sergo · 17.03.2019, 07:30

sad67man,

В нативном это еще проще делается, если интересно загуглите insertRule

@masli · 17.03.2019, 09:02 **[ТС]**

Сообщение от sad67man

Либо откажитесь от before и сделайте отдельный элемент.

как? можете простой пример, чем заменить before,

я несколько раз перечитывал о псевдоэлементах, и каждый раз еще больше непонятного , хоть и примеры есть, если бы понимал их смысл, то имеющиеся решение, которое предоставил выше, переделал бы.

@masli · 17.03.2019, 09:05 **[ТС]**

вот что на выходе нужно

ну а затем "слушать" изменения переключателя и запускать нужные функции

@masli · 17.03.2019, 22:00 **[ТС]**

решено

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@Mr_Sergo 2037 / 1096 / 409 Регистрация: 29.04.2016 Сообщений: 2,625
	17.03.2019, 07:30
	sad67man, В нативном это еще проще делается, если интересно загуглите insertRule 0

@masli 52 / 18 / 11 Регистрация: 27.03.2013 Сообщений: 789
	17.03.2019, 09:05 [ТС]
	вот что на выходе нужно ну а затем "слушать" изменения переключателя и запускать нужные функции Изображения 0

@masli 52 / 18 / 11 Регистрация: 27.03.2013 Сообщений: 789
	17.03.2019, 22:00 [ТС]
	решено 0