Как использовать javascript или jquery для изменения атрибута: перед псевдоэлементом?

Я пытаюсь изменить «левый» атрибут псевдоэлемента :before. У меня нет проблем с изменением любых других элементов с помощью JavaScript или jQuery, но, похоже, я застрял при попытке изменить элемент на вкладке :before.

Например, я не могу установить для атрибута left элемента :before ниже значение 200.

Мой CSS:

#buttonBox {
    position: absolute;
    width:150px;
    z-index:10;
    left:298px;
    top: 130px;
}

#buttonBox:before {
    position: absolute;
    content: "";
    top: -8px;
    left: 80px;
    margin-left: -8px;  
    border-bottom: 8px solid #ddd;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;        
    border-top: 0;
    border-bottom-color: #1e2227; 
}

В JavaScript:

document.getElementById("#buttonBox:before")

дает null, что делает невозможным его установку.

jQuery:

$("#buttonBox:before").offset({top: -8, left: 200});

также не отвечает при установке атрибута left.

Есть ли что-то, что мне не хватает в том, как изменить атрибуты псевдоэлементов? Мне не повезло погуглить это.


javascript jquery css setattribute
person Andrew L    schedule 28.11.2011    source источник
comment
stackoverflow.com/ вопросы/5814810/, stackoverflow.com/ вопросов/5347690/, stackoverflow.com/questions/5041494/   -  person RightSaidFred    schedule 28.11.2011

Ответы (3)


arrow_upward
1
arrow_downward

Вы не можете изменять псевдоэлементы с помощью JQuery. Вместо этого используйте классы для управления их атрибутами CSS. Пример:

#buttonBox.active:before {
   top: -8px;        
   left: 200px;
}

При необходимости класс .active будет применяться через Javascript.

person Nate B    schedule 28.11.2011
comment
Понял. Далее, элемент :before создает небольшой карат поверх моего блока, который содержит список переменной ширины. Я хотел поместить карат прямо посередине верхней части этой коробки. Что-то вроде: $(#origins:before).offset({top: -8, left: $(#origins).width()/2}). Насколько я понимаю, это было бы невозможно сделать ни в javascript, ни в jquery, так как для использования классов вам нужно было бы заранее знать, какое значение для left вы собираетесь установить. Правильный? - person Andrew L; 28.11.2011
comment
Уточнение. Если бы в середине было бы легко слева: 50%. Но мне также нужно иметь возможность размещать по бокам, если я нажимаю на объект по бокам экрана. Я в значительной степени определил, что это невозможно сделать, не удалив элемент :before и сделав его родственным. Спасибо за помощь! знак равно - person Andrew L; 28.11.2011
comment
Да, ты прав. Если есть какая-то логика для расчета (сторона против верха), то это сложнее. Однако вы можете применить два класса: .top и .side. Каждый изменит элемент :before и поменяет положение. Таким образом, логика остается в Javascript, а отображение остается в CSS. - person Nate B; 28.11.2011

arrow_upward
0
arrow_downward

Вы можете изменить :before и :after с помощью JS, но это достаточно раздражает, поэтому вам, вероятно, не следует этого делать.

Для этого вам нужно использовать идентичный селектор и вручную добавить новый элемент style в head веб-страницы, содержащей новые стили:

$('<style type="text/css">#buttonBox:before { left: 200px; top: -8px; }</style>').appendTo('head');

Псевдоэлементы фактически не являются элементами DOM (отсюда и "псевдо"). Они не существуют таким образом, чтобы JavaScript мог получить к ним доступ, кроме добавления/удаления таблиц стилей.

person zzzzBov    schedule 28.11.2011

arrow_upward
-1
arrow_downward

Может быть, вы могли бы использовать функцию prev() в jQuery?

http://api.jquery.com/prev/

person Zencode.dk    schedule 28.11.2011