17.06.2010, 15:14
|
 |
Профессор
|
|
Регистрация: 25.05.2010
Сообщений: 511
|
|
|
Зачем такой огромный код для такой задачи? То что предложил Skipp намного оптимальнее.
|
|
17.06.2010, 16:00
|
|
Новичок на форуме
|
|
Регистрация: 17.06.2010
Сообщений: 8
|
|
|
Сообщение от bushstas
|
|
функция nohover() перекрасит текст обратно в цвет до наведения
|
, а если в браузере пользователя отключен ява скрипт?? |
|
17.06.2010, 16:02
|
 |
.
|
|
Регистрация: 30.03.2010
Сообщений: 1,813
|
|
paveljava5,
Зачем задавать такой вопрос, если ответ очевиден 
__________________
.
|
|
27.11.2019, 10:40
|
|
Кандидат Javascript-наук
|
|
Регистрация: 12.05.2015
Сообщений: 111
|
|
|
А у меня обратная задача
Собственно сабж - узнать стили элемента, когда он :hover.
То-есть, существует какой-то элемент, допустим
<input id="inp1">
, который чем-то стилизуется, например бутстрапом или еще чем-то неизвестным.
Мне надо js-ом добавлять на страничку, допустим кастомный селект, который внешне будет стилизован как этот инпут с id="inp1".
Стили инпута не :hover-ные считываются getComputedStyle().
Вопрос, где взять стили этого инпута при :hover. |
|
27.11.2019, 12:05
|
|
.
|
|
Регистрация: 30.03.2010
Сообщений: 1,813
|
|
Вариантов не много, на скорую руку накатал только такой:
<html>
<head>
<style>
body > a {
color: red;
}
body > a:hover {
color: blue !important;
}
@media (max-width: 991.98px) {
body > a:hover {
color: green;
}
}
body > a:hover {
color: yellow;
}
</style>
</head>
<body>
<a href="javascript:void(0)">Link</a>
<script>
window.getPseudoStyles = function(element, pseudo) {
if(!document.styleSheets) return;
for(var i = document.styleSheets.length - 1; i > -1; i--) {
var
rules = document.styleSheets[i].cssRules ? document.styleSheets[i].cssRules : document.styleSheets[i].rules;
for(var j = rules.length - 1; j > -1; j--) {
if(rules[j].selectorText) {
var
match = rules[j].selectorText.match(new RegExp('^(.+)(' + pseudo + ')$'));
if(match && match.length === 3 && document.querySelector(match[1]).isEqualNode(element))
return rules[j].style;
}
}
}
return;
}
var
a = document.querySelector('body > a');
alert(getPseudoStyles(a, ':hover').color);
</script>
</body>
</html>
Но не работает с медиа, для этого надо дописывать, но получится ещё больший велосипед чем это.
Вообще не представляю задачу при которой потребуется данное решение, обычно подход идёт совсем с другой стороны.
Так же, в данном случаи берётся последний из вариантов применённых стилей с псевдо классом, как делает это браузер, по сути предыдущие не нужны, но есть но, !important и тут он получается игнорируется, по этому дополнительных изменений функции не избежать.
__________________
.
Последний раз редактировалось Skipp, 27.11.2019 в 12:15.
|
|
27.11.2019, 12:23
|
|
Кандидат Javascript-наук
|
|
Регистрация: 12.05.2015
Сообщений: 111
|
|
Сообщение от Skipp
|
Вариантов не много, на скорую руку накатал только такой:
<html>
...
</html>
Но не работает с медиа, для этого надо дописывать, но получится ещё больший велосипед чем это.
Вообще не представляю задачу при которой потребуется данное решение, обычно подход идёт совсем с другой стороны.
Так же, в данном случаи берётся последний из вариантов применённых стилей с псевдо классом, как делает это браузер, по сути предыдущие не нужны, но есть но, !important и тут он получается так же игнорируется, по этому дополнительных изменений функции не избежать.
|
Нене. Не то.
Давайте посмотрим на начальную задачу. там сказано, что стили инпута устанавливаются чем-то не известным например бутстрапом подключенным с cdn-а или любым другим css-фреймворком (или своим css файлом, который лежит не известно где, как называется, и т.д. в нем может и не быть отдельного класса для инпута может и не быть прописан :hover для инпута), то-есть парсить стили или css файлы - не вариант.
Задача - вполне понятная - воткнуть свой кастомный селект в любой html с минимальными затратами на написание css для кастомного селекта, чтобы он при этом не выбивался из общей стилистики html документа, в том числе по поведению.
Например мы пльзуем бутстрап, при наведеннии на инпут бутстрапов css подсвечивает инпут (меняет цвет рамки, добавляет тень и т.д.)
Вот это мне и надо взять, чтобы к кастомному селекту прикрутить.
Последний раз редактировалось dpts, 27.11.2019 в 12:26.
|
|
27.11.2019, 12:43
|
|
.
|
|
Регистрация: 30.03.2010
Сообщений: 1,813
|
|
Во первых, ваш вопрос:
|
Сообщение от dpts
|
|
Вопрос, где взять стили этого инпута при :hover.
|
Во вторых, какая разница откуда подключаются стили и какие фрейморков? Чем они отличаются от кастомных?
В третьих, я больше чем уверен, что вы пошли не той дорогой для решения задачи, почему нельзя просто клонировать элемент, не добавляя какие-то свои стилевые правила?
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css" integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous">
</head>
<body>
<a href="javascript:void(0)">Link</a>
<script>
window.getPseudoStyles = function(element, pseudo) {
if(!document.styleSheets) return;
for(var i = document.styleSheets.length - 1; i > -1; i--) {
var
rules = document.styleSheets[i].cssRules ? document.styleSheets[i].cssRules : document.styleSheets[i].rules;
for(var j = rules.length - 1; j > -1; j--) {
if(rules[j].selectorText) {
var
match = rules[j].selectorText.match(new RegExp('(?:^|,)([^,]+)(' + pseudo + ')(?:$|,)'));
if(match && match.length === 3)
var
el = document.querySelector(match[1]);
if(el && el.isEqualNode(element))
return rules[j].style;
}
}
}
return;
}
var
a = document.querySelector('body > a');
alert(getPseudoStyles(a, ':hover').color);
</script>
</body>
</html>
Подправил скрипт, не учёл групповые правила.
__________________
.
|
|
27.11.2019, 12:54
|
|
Кандидат Javascript-наук
|
|
Регистрация: 12.05.2015
Сообщений: 111
|
|
|
Сообщение от Skipp
|
Во первых, ваш вопрос:
Во вторых, какая разница откуда подключаются стили и какие фрейморков? Чем они отличаются от кастомных?
В третьих, я больше чем уверен, что вы пошли не той дорогой для решения задачи, почему нельзя просто клонировать элемент, не добавляя какие-то свои стилевые правила?
Подправил скрипт, не учёл групповые правила.
|
Что клонировать чтобы не добавлять свои стилевые правила, input?
Ну так я и получу клонированный инпут, а мне надо взять от этого инпута стили и прикрутить часть из них к div,
в котором input и кнопка, открывающая список опций, часть к инпуту в диве, часть к кнопке.
(размеры, отступы, стили текста, бэкграунд и бордер и т.д.). через .getComputedStyle() на старте все это берется без вопросов,
Но у "эталонного" инпута могут быть еще и стили прописанные на :hover и/или :focus (изменения стиля бордера, например,) вот их я также хочу прочитать, чтобы это изменение прикрутить к div, а не к input? который получен путем клонирования.
Чот тупанул я. Спасибо буду пробовать.
Последний раз редактировалось dpts, 28.11.2019 в 08:48.
|
|
28.11.2019, 05:35
|
|
Кандидат Javascript-наук
|
|
Регистрация: 12.05.2015
Сообщений: 111
|
|
Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
at window.getPseudoStyles ( http://localhost:73/getPseudoStyles/:14)
at http://localhost:73/getPseudoStyles/:35
Причем Ошибка выдается, если:
1. вообще никаких стилей не подключать
2. если кроме бутстрапа пытаться подключить
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
или/и
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap&subset=cyrillic" rel="stylesheet">
Последний раз редактировалось dpts, 28.11.2019 в 09:14.
|
|
28.11.2019, 09:01
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Хром?
|
|
|
|
