Jquery Selectors to Get Background Color

jquery get background-color hex
jquery select background-color
jquery css
css selectors
css attribute selector
css selector contains
a href css selector
css advanced selectors

I currently have several divisions with an svg in each. I want to get the next div's (targeted by class) background color through jquery and apply it as css fill for the previous parents svg. I tried to use nextAll and prevAll and but it doesnt work.

view sample

Try below code

$(document).ready(function(){

$('.awesome').each(function(){
var theColor = $(this).css( "background-color" );

$(this).prev().find('svg').css( "fill", theColor);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="awesome" style="background-color:white;">
<svg id="curveUpColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
				<path d="M0 100 C 20 0 50 0 100 100 Z"></path>
			</svg>
</div>
<div class="awesome" style="background-color:blue;">
<svg id="curveUpColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
				<path d="M0 100 C 20 0 50 0 100 100 Z"></path>
			</svg>
</div>
<div class="awesome" style="background-color:black;">
<svg id="curveUpColorr" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
				<path d="M0 100 C 20 0 50 0 100 100 Z"></path>
			</svg>
</div>
<div class="awesome" style="background-color:red;">
<svg id="curveUpColorrrr" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
				<path d="M0 100 C 20 0 50 0 100 100 Z"></path>
			</svg>
</div>

How to select elements based on style.backgroundColor, I would like to select all input elements on a page in which have a specific background-color. How would I So using a selector based $("input. jQuery code to set the background color of all p elements to red is $("p").css("background-color","red");. Log onto SlightBook for more technical code about jQuery.

The nextAll() method returns all next sibling elements of the selected element.

Sibling elements are elements that share the same parent.

i think that your div is not same parent try this:

$(".target_class").parent().parent().find("div")

backgroundColor | Search Results, Search Results for: backgroundColor Get the value of a computed style property for the first element in the set of matched elements or set one :eq() Selector. I want to get the next div's (targeted by class) background color through jquery and apply it as css fill for the previous parents svg. I tried to use nextAll and prevAll and but it doesnt work. view sample

$(document).ready(function() {

  //this will get first child of division with awesome classname
  var theColor = $("div.awesome:first").css("background-color");

  //this will get all the svg(s) except first 
  $("div.awesome").find("svg:not(:first)").css("background-color", theColor);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="awesome" style="background-color:white;">
  <svg id="curveUpColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
				<path d="M0 100 C 20 0 50 0 100 100 Z"></path>
			</svg>
</div>

<div class="awesome" style="background-color:blue;">
  <svg id="curveUpColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
				<path d="M0 100 C 20 0 50 0 100 100 Z"></path>
			</svg>
</div>

<div class="awesome" style="background-color:black;">
  <svg id="curveUpColorr" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
				<path d="M0 100 C 20 0 50 0 100 100 Z"></path>
			</svg>
</div>

<div class="awesome" style="background-color:red;">
  <svg id="curveUpColorrrr" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
				<path d="M0 100 C 20 0 50 0 100 100 Z"></path>
			</svg>
</div>

jQuery CSS: Get the background color of an element, Click on the following paragraphs and get the background color. Sample Data : HTML : <body> <p>jQuery Exercises</p> <p>and Solution.</p>  jQuery Selectors. jQuery Selectors are used to select and manipulate HTML elements. They are very important part of jQuery library. With jQuery selectors, you can find or select HTML elements based on their id, classes, attributes, types and much more from a DOM.

jQuery css() Method, like to select all input elements on a page in which have a specific background-​color. in Using jQuery • 7 years ago So using a selector based $("input. jQuery Selectors. jQuery selectors allow you to select and manipulate HTML element(s). jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.

jQuery Get and Set CSS Properties, Set the color property of all <p> elements: However, shorthand CSS properties (like "background" and "border") are not fully $(selector).css(property,value). jQuery Tutorial jQuery HOME jQuery Intro jQuery Get Started jQuery Syntax jQuery Selectors jQuery Events jQuery Effects jQuery Hide/Show jQuery Fade jQuery Slide jQuery Animate jQuery stop() jQuery Callback jQuery Chaining jQuery HTML jQuery Get jQuery Set jQuery Add jQuery Remove jQuery CSS Classes jQuery css() jQuery Dimensions jQuery Traversing

The Best jQuery Examples, To return the value of a specified CSS property, use the following syntax: css("​propertyname");. The following example will return the background-color value of​  $ ("li.item-a").parent ().css ("background-color", "red"); The result of this call is a red background for the level-2 list. Since we do not supply a selector expression, the parent element is unequivocally included as part of the object. If we had supplied one, the element would be tested for a match before it was included.

Comments