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)
Related
Basically, i have fixed button on bottom that scrolls over the page on mobile. The color of button is yellow and i want when the button scrolls over sections that are same color as button, to get additional class or change style directly inline and set BG color to white.
Is it possible with Observer or something similar?
Thanks!
The trouble with trying to use the Intersection Observer API in this case is twofold:
The yellow sections are not ancestors of the button, they're likely siblings.
The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element...
The button is position: fixed, which doesn't play nicely with the internals of the API: Intersection observer does not work with target with position: fixed.
The old-school way of doing this would be to check the bounding box of the button against the bounding boxes of the yellow sections each time the page is scrolled.
That means calling Element.getBoundingClientRect() once for the button (it's bounding box should never change because it's position: fixed relative to the viewport) and once for each yellow section each time the scroll event is raised.
Here's a sample showing this approach:
const button = document.getElementById('some-action');
const buttonRect = button.getBoundingClientRect();
const yellowDivs = document.querySelectorAll('div.yellow');
const areIntersecting = (bounds1, bounds2) =>
bounds1.top < bounds2.bottom && bounds1.bottom > bounds2.top;
document.addEventListener('scroll', () => {
/* Use for...of, not .forEach so we can
return early. */
for (let item of yellowDivs) {
const itemRect = item.getBoundingClientRect();
if (areIntersecting(itemRect, buttonRect)) {
button.classList.add('white');
button.classList.remove('yellow');
/* We don't care how many yellow divs the button
is intersecting. Once we've found one, we can
return so we're not computing the rectangles
of the rest. */
return;
}
/* If none of the yellow divs were interecting,
reset the color of the button. */
button.classList.add('yellow');
button.classList.remove('white');
}
});
div.blue, div.white, div.yellow { height: 250px; }
.blue { background-color: blue; }
.white { background-color: white; }
.yellow { background-color: yellow; }
#some-action {
position: fixed;
top: 20px;
right: 20px;
padding: 10px 20px;
}
<div class="blue"></div>
<div class="yellow"></div>
<div class="white"></div>
<div class="blue"></div>
<div class="yellow"></div>
<div class="white"></div>
<div class="blue"></div>
<div class="yellow"></div>
<div class="white"></div>
<div class="blue"></div>
<div class="yellow"></div>
<div class="white"></div>
<div class="blue"></div>
<div class="yellow"></div>
<div class="white"></div>
<button id="some-action" class="yellow">Some Action</button>
Change background color on first click (by this keyword ) and after second click background color should change back to that previous color in JavaScript
<div class="tag-box-cover" id="tag_box_cover">`my main heading`
<div class="label-text">Trivandrum</div>`content`
<div class="btn-wrap">`internal div`
<div class="tag-btn">
<a data-id="15" onclick="h_bg_color()" class="tag-anchor add-category-to-setup has-parent">`onclick button`
<i class="material-icons"></i>
</a>
</div>
</div>
</div>
You can simply add a default background color and toggle a CSS class with higher specificity containing another background color on click as shown below:
document.querySelector('#tag_box_cover')
.addEventListener('click', e => {
e.target.classList.toggle('bg-blue');
});
.tag-box-cover {
height: 100px;
width: 100px;
background-color: red;
}
#tag_box_cover.bg-blue {
background-color: blue;
}
<div class="tag-box-cover" id="tag_box_cover"></div>
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>
I have 12 tiles (100px by 100px squares) on my screen.
Each tile by default is set to display:block and has a white background background: rgb(255,255,255);
If a tile is clicked, the background becomes orange rgb(255,161,53). Using the following function:
function changeColour(id){
{
var current_bg = document.getElementById(id).style.backgroundColor;
if(current_bg != "rgb(255, 161, 53)"){
document.getElementById(id).style.backgroundColor = "rgb(255,161,53)";
} else if(current_bg == "rgb(255, 161, 53)"){
document.getElementById(id).style.backgroundColor = "rgb(255,255,255)";
}
}
At the bottom of the page I have a button called "showHide", once it is pressed I want only the tiles with an orange background to be shown. Once it pressed again I want ALL of the tiles to appear.
What I meant with meta data
A break down:
The first block iterates over every tile and sets an onclick handler
When you click a block it will either set orange to the class list or remove it using toggle. The actual orange coloring comes from the stylesheet. Where tiles that don't have orange in their class names :not() get a white background.
When you click the show hide button you'll see the same trick. Every class list that doesn't contain orange get hidden by the hide class name that gets toggled.
I've used a different approach here, using class names as selectors and play with them to get the desired result.
function changeColour() {
this.classList.toggle("orange");
//if hiding is on we need to also hide that block
if (this.parentElement.querySelectorAll("div.tiles.hide").length > 0)
{
this.classList.add("hide");
}
}
var divs = document.querySelectorAll("div.tiles");
//use Array.prototype.forEach to iterate over nodelist
Array.prototype.forEach.call(divs, function(element){
element.addEventListener("click", changeColour);
});
document.querySelector("button.hide").addEventListener("click", showHide);
function showHide(){
Array.prototype.forEach.call(divs, function(element){
if (!element.classList.contains("orange"))
{
element.classList.toggle("hide");
}
});
}
div.tiles {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid grey;
}
div.tiles:not(.orange) {
background-color: #ffffff;
}
div.tiles.orange {
background-color: rgb(255,161,53);
}
div.tiles.hide {
display: none;
}
<div class="tiles"></div>
<div class="tiles"></div>
<div class="tiles"></div>
<div class="tiles"></div>
<div class="tiles"></div>
<button class="hide">show/hide white tiles</button>
I have a parent DIV that contains three other small DIV's. I would like to change the background colors of the three child DIV's when I hover or mouseover the parent DIV. Is it possible to do this in javascript or jquery?
<div id="r1"> //Mousover
<div class="bx"></div> //Change background color
<div class="bx"></div> //Change background color
<div class="bx"></div> //Change background color
</div>
You don't need to do this with javascript, you can just use CSS
div#r1:hover div.bx{ background-color: red; }
You can do this in CSS as well,
but from what I understand you want to do, this is how you can achieve that in JQuery:
<div id="r1" onmouseover='changeBg(this);' onmouseout='revertBg(this);'> //Mousover
<div class="bx"></div> //Change background color
<div class="bx"></div> //Change background color
<div class="bx"></div> //Change background color
</div>
<script type='text/javascript'>
function changeBg(div){
$(div).children('.bx').attr('background-color', '#AAAAAA');
}
function revertBg(div){
$(div).children('.bx').attr('background-color', '#BBBBBB');
} <script>
Add this to your javascript:
$('#r1').hover(function(){ $(this).addClass('r1hovered'); });
And add that to your CSS:
.r1hovered .bx { background-color: red; }
Source : http://api.jquery.com/hover/