задать hover для элемента
Допустим есть элемент <a id="some">
Так вот возможно ли задать средствами JS ему :hover как этот в css #some:hover {color:#---} |
Конечно можно. Вот один из вариантов:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html><head><title>New</title>
<script type="text/javascript">
window.onload = function(){
var style = document.createElement('style');
style.type = 'text/css';
var h = '#some:hover{color:#f00}';
var hover = document.createTextNode(h);
var head = document.getElementsByTagName('head')[0];
style.appendChild(hover);
head.appendChild(style);
}
</script>
</head><body>
<h1><a id="some" href="#">test</a></h1>
</body></html>
|
ясно, значит нужно добавить стиль в Head
спасибо! |
<script type="text/javascript">
//можно сымитировать :hover c помощью событий onmouseover и onmouseout
window.onload = function(){
var some = document.getElementById('some');
some.style.color = 'lightblue';//задаем цвет по умолчанию
some.onmouseover = function(){
some.style.color = '#f00';
}
some.onmouseout = function(){
some.style.color = 'lightblue';
}
}
</script>
|
Я сделал может и криво но по-своему :)
<a id="some" onmouseover="hover('some','c14141')" onmouseout="nohover()"> Наведи на меня </a>
function hover(id,c){
// узнаем цвет до наведения и запоминаем
var color=document.getElementById(id).style.color;
if (color=="unfefined" || color==""){
var par=document.getElementById(id)
while(color=="undefined" || color==""){par=par.parentNode; color=par.style.color}
colorBefore=color}
else {colorBefore=color}
document.getElementById(id).style.color="#"+c
Hovered=id
}
function nohover(){
if (colorBefore==""){colorBefore="#000000"}
document.getElementById(Hovered).style.color=colorBefore
Hovered=""
}
тока если ни у одного из родителей не будет задан в стилях color будет плохо :) еще бы улучшить чтобы не передовать id элемента а вычислять в самой функции :) |
bushstas,
можно и без id <a onmouseover="hover(this,'c14141')" onmouseout="nohover()"> Наведи на меня </a> |
спасибо Skipp мне вот этот this пока с трудом дается оказывается все просто :)
|
bushstas,
В данном случае this передаёт ссылку на элемент <a> А вообще интересно, что этой функцией вы хотите сделать, вникать в код не хочется, суть в чём. Может что попроще подскажу. |
этой функцией я хочу изменять цвет шрифта элементов <a> при наведении на них, чтобы не прописывать в css для каждого hover, просто передовать цвет в функцию hover().
та узнает цвет текста до наведения из стиля, если не указан из стиля родителя и так далее вверх по дереву, запомнит, перекрасит текст в переданный цвет функция nohover() перекрасит текст обратно в цвет до наведения :) |
bushstas,
Похимичте с этим <a id="some" onmouseover="this.style.color='#c14141'" onmouseout="..."> Наведи на меня </a> |
Зачем такой огромный код для такой задачи? То что предложил 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"> |
Хром?
|
Цитата:
то же самое в Опере 64.0.3417.92 а в IE работает ) При этом, если normalise.css и гуглошрифты подключить раньше бутстрапа - то работает ) |
В Хроме то-ли до как раз 64, то-ли в нем, то-ли после него, не помню, была изменена политика CORS, из-за чего и проблемы. Но в своем проекте css ведь и у себя можно держать, и ошибок не будет.
|
Цитата:
Основной-то замысел как-раз в том, чтобы можно было с минимальными затратами по времени на разбирание сторонних css максимально приближенный по внешнему виду и реакции на ховеры/фокусы к подключенным в проекте css Если "что-то у себя держать" - то можно просто под каждый проект прописывать руками стили и все, а я хочу от этого избавиться по максимуму. |
Цитата:
|
Цитата:
Под не свой, я не имел в виду, что мне надо что-то насильно воткнуть в какой-то HTML каким-то посторонним скриптом. Есть HTML c подключенными стилями, я в этом же HTML скриптом из этого-же HTML пытаюсь почитать стили и никак иначе. Считается-ли это сторонним проектом? Не думаю. |
Да, чёртова политика безопасности, в аднном случаи по моему вообще не оправданная.
Я всё так и не пойму, почему нельзя клонировать объекты? |
Цитата:
Попробуйте подключение через прокси. |
Насчёт логики согласен, думаю проблема в подходе к решению задачи.
<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>
document.body.append(document.querySelector('body > a').cloneNode(true));
</script>
</body>
</html>
Правда js события не подцепятся. |
Цитата:
Но опишу ее еще раз: 1. Я делаю кастомный селект, размеченный условно:
<div>
<input>
<button></button>
</div>
2. На странице есть, допустим <input id="inp1" class="form-control">, который я беру за "эталонный". 3. я от эталонного инпута беру стили .getComputedStyle() и приделываю часть из них к div, часть к input, часть к button. Все стает хорошо и ровненько содержимое из пункта 1 вписывается в стилистику эталонного инпута. Теперь мне надо от эталонного инпута hover и focus прочитать, чтобы и их прикрутить. Если я склонирую Инпут, то я склонирую именно Инпут и ничто другое. Ничто не мешает под каждый проект писать эти стили в принципе. Но с таким подходом можно и счеты использовать. Дело не в лени, если это действительно нельзя сделать - то вопросов нет, если можно сделать. то почему не сделать? |
Отлично, теперь полностью понятен смысл.
Над этим надо подумать, каких-то простых решений нету, но всегда есть обходные пути. |
Цитата:
|
Цитата:
Допустим у этого input стиль прописан по правилу: input.from-control или вообще #inp1 В таком случаи к допустим button ты его не применишь. |
Цитата:
|
Цитата:
1. это может быть не бутстрап 2. это может быть и бутстрап но класс не прописан 3. это может быть свой класс. 4. это могут быть 15 (условно) классов, какой из них брать? 5. вы предлагаете класс единичного инпута применить к div внутри которого input и button? - А вы уверены, что .form-control{display:flex;} например? И на самом деле - еще вагон и маленькая тележка вопросов, неизбежно возникающих в этом случае. Такчто мы не знаем класс |
Цитата:
Вы смотрите на вопрос только с точки зрения js профи, не глядя на внешний вид результата. Я наоборот, обращаюсь к js профи, чтобы понять как прийти к нужному визуальному результату. Вы конечно можете предложить склонировать инпут, чтобы ховеры и фокусы применялись к инпуту а не к диву, а кнопку положить слоем выше с абсолютным позиционированием в правом верхнем углу. Но, не забывайте, что: 1. div-то в документе и фоном документа может быть все, что угодно. 2. у эталонного дива может быть background:none; соответственно и диву и инпуту и кнопке надо такой же бэкграунд (пока не страшно). 3. а давайте теперь диву и инпуту из пункта 2 выставим ширину 100 пикселей, и в инпут закопипастим пару параграфов Лоремов. Станет страшно. И это просто пример на вскидку. Даже сильно не выдумывая и глубоко не копая. |
Цитата:
|
Цитата:
Я в курсе, что я дебил, но я пытаюсь учиться. И спрашиваю чтобы понять и научиться, а не для того, чтобы потрясти воздух "душевными терзаниями". И именно потому, что: "JS за вас думал, догадывался чего вы хотите, искал, подбирал, выбраковывал лишнее", - до сих пор не случилось, предлагаемое Вами клонирование не проходит, а про display:flex - это всего-лишь "посмотреть на полшага вперед", именно про тот визуальный анализ, которым Вы же и козырнули. |
Цитата:
|
Цитата:
Но опять же с точки зрения визуального анализа: 1. если это уже прописано - берем написанное. 2. если не прописано - берем свое. 3. я и не хочу обходить и описывать ВСЕ селекторы, я хочу посмотреть на 1 элемент с известным id (я не в курсе механизмов какими JS добирается до стилей этого элемента, вполне возможно, что он обходит все селекторы, которые есть, а не только селекторы этого элемента) Потому и спросил изначально. Решение предложенное Skipp - вполне себе нормальное решение, если бы не политика безопасности. |
Цитата:
На JS - сначала смотрим правила, затем пишем что-то для JS и нагружаем его, боремся попутно с проблемами возможными, ковыряемся в стилях в поиске, затем применяем. Я может быть не понимаю, может быть в этом есть какой-то скрытый глубокий смысл, но я не вижу вообще в этом никакого смысла. Ну коли охота, то она же пуще неволи. |
| Часовой пояс GMT +3, время: 10:04. |