I am trying to make a chrome extension that finds the original background color of the pressed element.
I mean the background color that was before user hovered and the :hover selector (maybe) changed it.
I tried to use document.styleSheets but it gives me an error.
Example
window.addEventListener("click",function(e){
pressedElement = e.target;
console.log(window.getComputedStyle(pressedElement,null).backgroundColor);
//return blue but I want the background before hover changes (green,yellow,red in this case)
});
div{
height:100px;
width:100px;
}
div:hover{
background-color:blue !important;
}
<div style="background-color:green;">1</div>
<div style="background-color:yellow;">2</div>
<div style="background-color:red;">3</div>
window.getComputedStyle(pressedElement,null).backgroundColor return the current background color (blue in this case), but I want the background color before :hover changes (red, yellow or green in this case).
Just replace the element with itself, which forces the hover state to update, then calculate the style:
window.addEventListener("click",function(e){
const target = e.target;
target.parentNode.replaceChild(target, target)
const color = window.getComputedStyle(target,null).backgroundColor;
console.log(color);
return color;
});
div{
height:100px;
width:100px;
}
div:hover{
background-color:blue !important;
}
<div style="background-color:green;">1</div>
<div style="background-color:yellow;">2</div>
<div style="background-color:red;">3</div>
Related
I'm creating a bookmarklet that displays some information on the first element you click on after running the bookmarklet. I would love to have it so the element you are hovering over has an outline, but only before you click. After you have selected an element, the outline would no longer appear when hovering (except if it already did so before my bookmarklet).
To get the clicked element, this works fine for me:
function getClickedElement(e) {
document.removeEventListener("click", getClickedElement);
e.preventDefault();
clickedElement = e.target || e.srcElement;
// Some code that displays information on clickedElement...
}
document.addEventListener("click", getClickedElement);
But I don't know how to do the CSS. It would work like all elements gain this CSS:
:hover {
outline: 1px solid black;
}
while selecting an element, but that stops once an element has been selected. Hope that all made sense.
Small example with the principle explained!
If the user clicks on the element, add a specific class.
CSS Rule adds outline-border only if the element does not match the selector inside the :not pseudo class!
document.addEventListener('click', function(evt) {
var target = evt.target || evt.source;
if(!target.classList.contains('element')) return;
if(target.classList.contains('selected'))
target.classList.remove('selected');
else
target.classList.add('selected');
}, true);
div.element {
width:100px;
height:100px;
background-color:silver;
display:inline-block;
}
.element.selected {
background-color:black;
}
.element:not(.selected):hover {
outline: 1px solid red;
}
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
How can I change the first color only in CSS linear gradient using Javascript?
div {
background: -webkit-linear-gradient(top, #F6F6F6, #E9E9E9)
}
as you can see I want to change the color "#F6F6F6" only.
the script must be in Javascript not jquery.
Just remove the class from the div and add a new class with the new attributes.
Fiddle : https://jsfiddle.net/reko91/suuwe4wc/4/
I would add another class that applies to all divs, in this case 'divs' and the linearGradient class too.
<div class='divs linearOne'>
</div>
Only added JQuery for button click
var divs = document.getElementsByClassName('divs');
var toggle = false; //used to toggle between
document.getElementById('clickme').addEventListener("click", function (event) {
if(!toggle){
divs[0].classList.remove('linearOne')
divs[0].classList.add('linearTwo');
toggle = true;
} else {
divs[0].classList.add('linearOne')
divs[0].classList.remove('linearTwo');
toggle=false;
}
})
.linearOne {
width:100px;
height:100px;
background: -webkit-linear-gradient(top, #F6F6F6, #E9E9E9)
}
.linearTwo {
width:100px;
height:100px;
background: -webkit-linear-gradient(top, #000000, #F6F6F6)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='divs linearOne'>
</div>
<button id='clickme'>
Toggle Gradient
</button>
If your <div> has an id, using JavaScript to change the background to (1) another gradient, (2) some color, or (3) no background at all is really as simple as this :
document.getElementById('anotherGradient').style.background = "-webkit-linear-gradient(top, #00E9E9, #F6F600)";
document.getElementById('greyBackground').style.background = "#E9E9E9";
document.getElementById('noBackground').style.background = "none";
div {
background: -webkit-linear-gradient(top, #F6F6F6, #E9E9E9)
}
<div id="anotherGradient">
This DIV should have a different gradient
</div>
<div id="greyBackground">
This DIV should have a grey background but no gradient
</div>
<div id="noBackground">
This DIV should not have any background at all
</div>
<div>
This DIV should have the original gradient
</div>
<div>
This DIV should have the original gradient
</div>
(see also this Fiddle)
Basically I want the user to be able to click and change the background, and for there to be multiple backgrounds, for a specific div.
This works perfectly in Google Chrome but not in IE or Firefox.
HTML:
<div id="palette">
<div class="lightblue"></div>
<div class="gold"></div>
<div class="aqua"></div>
</div>
<div id="primary">
</div>
CSS:
#palette {
border: 2px solid white;
width: 25px;
}
#palette div {
height: 25px;
width: 25px;
}
.lightblue {
background: lightblue url(http://www.textureking.com/content/img/stock/big/DSC_4279.JPG);
}
.gold {
background: gold url(http://www.textureking.com/content/img/stock/big/DSC_4287.JPG);
}
.aqua {
background: aqua url(http://www.textureking.com/content/img/stock/big/DSC_4274.JPG);
}
JS:
$(document).ready(function() {
// attach onclick event to your palette colors
$('#palette div').on('click', function() {
// get background of selected palette color
var bg = $(this).css('background');
// change the background of the body
$('#primary').css({ 'background': bg });
});
});
http://jsfiddle.net/KNutQ/1/
It's not showing any errors and other javascripts run, so I'm not really sure what the problem is.
If it's easy to fix please leave an answer, if not I will try it this way: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_backgroundimage
According to the CSS specification getting the computed style of a shorthand should not return anything. You need to list out the individual properties as I've done below.
Perhaps the CSS spec or Chrome will change in the future but at the moment Firefox and IE's behaviour is correct.
$(document).ready(function() {
// attach onclick event to your palette colors
$('#palette div').on('click', function() {
// get background of selected palette color
var backgrounds = $(this).css(['background-color','background-image', 'background-repeat', 'background-attachment', 'background-position']);
// change the background of the body
$('body').css(backgrounds);
});
});
I have 5 boxes here, as I hover from one end to another the boxes change color, the transition delay is 6s hence the animations are slow.
How can I trigger multiple hover events,
that is when I move the mouse over a div, it should trigger its hover event.
Example: when I move mouse from left to right, all the divs' hover events should run.
In my code the first hover effect is triggered, then it waits the event to end, then starts the next hover effect on some other div which is just under the pointer.
.box{
display: inline-block;
height: 50px;
width: 50px;
background-color: #000;
color: #fff;
-webkit-transition: .6s 0s;
text-align:center;
}
#box-1:hover{background-color: #C8F608;}
#box-2:hover{background-color: #23DC07;}
#box-3:hover{background-color: #07D7D7;}
#box-4:hover{background-color: #076BD7;}
#box-5:hover{background-color: #1307D7;}
<div class="container">
<div class="box" id="box-1">bx1</div>
<div class="box" id="box-2">bx2</div>
<div class="box" id="box-3">bx3</div>
<div class="box" id="box-4">bx4</div>
<div class="box" id="box-5">bx5</div>
</div>
here's my jsfiddle
thank you for any help :)
The background-color indicated in :hover no longer applies when you leave the element. So the element will go back to its unhovered state. You cannot prevent this from happening when depending solely on :hover.
Instead, you can add a class on hover, so that the effect remains.
Demo: http://jsfiddle.net/LYT8J/3/
CSS
#box-1:hover, #box-1.hovered {background-color: #C8F608;}
#box-2:hover, #box-2.hovered {background-color: #23DC07;}
#box-3:hover, #box-3.hovered {background-color: #07D7D7;}
#box-4:hover, #box-4.hovered {background-color: #076BD7;}
#box-5:hover, #box-5.hovered {background-color: #1307D7;}
JavaScript
$('.box').mouseover(function() {
$(this).addClass('hovered');
});
$('.container').mouseleave(function() {
$(this).find('.hovered').removeClass('hovered');
});
You want all of your div tags to trigger the hover effect when hovering over one, correct?
If that is the case you can use jQuery to solve this.
$(document).ready(function() {
$("div[id^='box-']").mouseenter(function() {
$("#box-1").css("background-color", "#C8F608");
$("#box-2").css("background-color", "#23DC07");
$("#box-3").css("background-color", "#07D7D7");
$("#box-4").css("background-color", "#076BD7");
$("#box-5").css("background-color", "#1307D7");
});
$("div[id^='box-']").mouseleave(function() {
$("#box-1").css("background-color", "#EEEEEE");
$("#box-2").css("background-color", "#EEEEEE");
$("#box-3").css("background-color", "#EEEEEE");
$("#box-4").css("background-color", "#EEEEEE");
$("#box-5").css("background-color", "#EEEEEE");
});
});
This should do what you want. When you enter any div tag with id that begins with box- it will trigger this mouseenter event to change the background-color of each div individually. The mouseleave event will restore the background-color to it's original background-color. You didn't list the original color so I just said #EEEEEE for a light gray color.
I want to add background color to particular selected text from Text area into div?
var elem=document.getElementById("askQuestionDescription");
var start=elem.value.substring(0,elem.selectionStart);
var selection = elem.value.substring(elem.selectionStart,elem.selectionEnd);
var end=elem.value.substring(elem.selectionEnd,elem.length);
// alert(start + ","+selection+","+end);
document.getElementById("askQuestionCodePreview").innerHTML=start+selection+end;
I want to set background on selection portion only.
Why don't you use this to change the background color of the selected text?
http://www.quirksmode.org/css/selection.html
#askQuestionDescription::selection {
background:red;
color:white;
}
#askQuestionDescription::-moz-selection {
background:red;
color:white;
}
#askQuestionDescription::-webkit-selection {
background:red;
color:white;
}