Зачем такой огромный код для такой задачи? То что предложил Skipp намного оптимальнее.
|
Цитата:
|
paveljava5,
Зачем задавать такой вопрос, если ответ очевиден:) |
А у меня обратная задача
Собственно сабж - узнать стили элемента, когда он :hover.
То-есть, существует какой-то элемент, допустим <input id="inp1">, который чем-то стилизуется, например бутстрапом или еще чем-то неизвестным. Мне надо js-ом добавлять на страничку, допустим кастомный селект, который внешне будет стилизован как этот инпут с id="inp1". Стили инпута не :hover-ные считываются getComputedStyle(). Вопрос, где взять стили этого инпута при :hover. |
Вариантов не много, на скорую руку накатал только такой:
<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 и тут он получается игнорируется, по этому дополнительных изменений функции не избежать. |
Цитата:
Давайте посмотрим на начальную задачу. там сказано, что стили инпута устанавливаются чем-то не известным например бутстрапом подключенным с cdn-а или любым другим css-фреймворком (или своим css файлом, который лежит не известно где, как называется, и т.д. в нем может и не быть отдельного класса для инпута может и не быть прописан :hover для инпута), то-есть парсить стили или css файлы - не вариант. Задача - вполне понятная - воткнуть свой кастомный селект в любой html с минимальными затратами на написание css для кастомного селекта, чтобы он при этом не выбивался из общей стилистики html документа, в том числе по поведению. Например мы пльзуем бутстрап, при наведеннии на инпут бутстрапов css подсвечивает инпут (меняет цвет рамки, добавляет тень и т.д.) Вот это мне и надо взять, чтобы к кастомному селекту прикрутить. |
Во первых, ваш вопрос:
Цитата:
В третьих, я больше чем уверен, что вы пошли не той дорогой для решения задачи, почему нельзя просто клонировать элемент, не добавляя какие-то свои стилевые правила?
<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>
Подправил скрипт, не учёл групповые правила. |
Цитата:
Ну так я и получу клонированный инпут, а мне надо взять от этого инпута стили и прикрутить часть из них к div, в котором input и кнопка, открывающая список опций, часть к инпуту в диве, часть к кнопке. (размеры, отступы, стили текста, бэкграунд и бордер и т.д.). через .getComputedStyle() на старте все это берется без вопросов, Но у "эталонного" инпута могут быть еще и стили прописанные на :hover и/или :focus (изменения стиля бордера, например,) вот их я также хочу прочитать, чтобы это изменение прикрутить к div, а не к input? который получен путем клонирования. Чот тупанул я. Спасибо буду пробовать. |
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"> |
Хром?
|
| Часовой пояс GMT +3, время: 02:17. |