Как я могу обращаться к селекторам программ программно?

-4

Я работаю из примера, который я нашел в Интернете, чтобы создать предполагаемые подсказки HTML5 в CSS3.Как я могу обращаться к селекторам программ программно?

.tooltip { 
    border-bottom: 1px dotted #333; 
    position: relative; cursor: pointer; 
} 

.tooltip:hover:after { 
    content: attr(title); 
    position: absolute; 
    white-space: nowrap; 
    background: rgba(0, 0, 0, 0.85); 
    padding: 3px 7px; 
    color: #FFF; 
    border-radius: 3px; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    margin-left: 7px; 
    margin-top: -3px; 
}

Как я могу создать это программно, поскольку приложение специально не содержит HTML или CSS?

Из того, что я могу сказать до сих пор, я думаю, что «после» - это селектор CSS, но я не могу узнать больше о том, как я могу создавать, изменять или модифицировать это в DOM с помощью JavaScript.

Решения для JavaScript только пожалуйста, спасибо.

источник

2012-06-27 thomas-peter

I .... не понимаю ваш вопрос. Вы хотите добавить CSS-правила в DOM с помощью JavaScript? –

Возможный дубликат: http://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript – micadelli

Серьезно остановите это. – BoltClock

Вы можете добавить любое правило CSS в документ, используя insertRule. На странице MDN есть метод, который показывает способ, совместимый с несколькими браузерами, для вставки произвольных правил CSS.

Поскольку ваше приложение не содержит HTML, вам необходимо создать объект <style>, используя document.createElement. document.styleSheets[0].cssRules будет null, когда таблица стилей имеет другое происхождение.

источник

2012-06-27 09:30:23

Спасибо, но он содержит встроенный CSS. Я пытаюсь создать демонстрационное приложение, которое не использует CSS или HTML. –

@tomwrong Почему вы хотите имитировать/Использовать CSS с использованием JavaScript без использования CSS? –

Мне не очень нравится CSS или HTML. Это делает меня очень непопулярным, я не работал почти год :-) –

Как :hover это событие переплета, вы должны подключить все соответствующие события (например, onmouseover, onmouseout) для всех соответствующих элементов (где /\btooltip\b/.test(className)), если вы хотите сделать это в JS.

Вы можете просто связать события с общим родителем (например, document.body, а затем осмотреть объект event, чтобы квалифицировать элемент, инициировавший событие, вместо прикрепления события к неизвестному числу элементов).

Что касается :after, то есть псевдо элемент, который вставляется после выбранного элемента, и из-за :hover это будет только в документе, при наведении. Поэтому вы просто используете DOM-методы для добавления/удаления элемента (вам не нужно создавать его каждый раз, вы можете его создать один раз и просто сохранить ссылку на него).

Вместо добавления/удаления элемента вы можете просто добавить его один раз и переключить его видимость (например, element.style.display = visible ? '' : 'none';).

Что вы делаете, зависит от вас.

источник

2012-06-27 10:54:11

Бывают события, которые происходят, когда элемент переходит между ': not (: hover)' и ': hover'. Сам псевдокласс не связан с событием * per se *. – BoltClock

@BoltClock: * Пользователь * событие, а не событие DOM. Я говорю на высоком уровне, ты говоришь низко. –

Как я могу обращаться к селекторам программ программно?

ответ

Смежные вопросы