Get Actual Value Specified in CSS Using Jquery

Get actual value specified in CSS using jQuery

Is there a way to get the exact CSS (non-computed) value of an element using jQuery?

You can only retrieve the computed value in px via the DOM.

That being said, you can work out the percentage by getting the elements height and comparing it to the parent's height. em, en and other measurements are not possible.

How to get the value of a CSS property using JQuery?

either

$('#boxB').css('left');

or

$('#boxB').offset().left;

How to get the value of CSS style using jQuery

I doubt css understands left by itself. You need to use it specifying position. You are using .css() correctly

position: relative/absolute/whatever;
left: 900px;

heres a fiddle of it working

https://jsfiddle.net/gFLZe/

and without the position here's what you get

https://jsfiddle.net/gkkm5/

Change your if statement to be like this - with quotes around -900px

var n = $("items").css("left");

if(n == '-900px'){
    $(".items span").fadeOut("slow");
}

https://jsfiddle.net/gFLZe/1/

How to get just numeric part of CSS property with jQuery?

This will clean up all non-digits, non-dots, and not-minus-sign from the string:

$(this).css('marginBottom').replace(/[^-\d\.]/g, '');

UPDATED for negative values

Retrieving original stylesheet CSS property value in JQuery/Javascript

I found the answer....

$(this).attr("customAttributeName", $(this).position().top);

then you can recall it with:

$(this).attr("customAttributeName");

jquery -Get CSS properties values for a not yet applied class

In order to read a CSS property value from a nonexistent element, you need to dynamically insert that element (as hidden) to the DOM, read the property and finally remove it:

var getCSS = function (prop, fromClass) {

    var $inspector = $("<div>").css('display', 'none').addClass(fromClass);
    $("body").append($inspector); // add to DOM, in order to read the CSS property
    try {
        return $inspector.css(prop);
    } finally {
        $inspector.remove(); // and remove from DOM
    }
};

jsFiddle here

How do I check for a css value using jQuery?

Looks like it gets returned in the form rgb(x, y, z), so your code should be:

$("#tracker_table tr#master").click(function(){
  if($(this).css("background-color") == "rgb(255, 255, 255)") { 
    $(this).css("background-color", "#C2DAEF");
  }
});

Edit: That being said, I'd suggest you use classes instead of inspecting/setting css properties directly. Something like this:

$("#tracker_table tr#master").click(function(){
  if(!$(this).hasClass("selected")) { 
    $(this).addClass("selected");
  }
});

Css:

tr { background-color: #FFFFFF; }
tr.selected { background-color: #C2DAEF; }

Determine if CSS property is set to a certain value?

Use

if( $("#test").css('display') == 'block') {

I'm fairly sure .css(), returning a calculated value, will always return a lower case result - the docs say nothing on this. To make totally sure, you could do a

if( $("#test").css('display').toLowerCase() == 'block') {

while you can rely on display giving reliable results, note that some CSS properties will not always show up the way they were defined. For example

a { color: red }

will turn out rgb(255,0,0); when queried using .css().

Get current value in a set of CSS classes using Jquery

I assume you want to fill the input with the content of the element with class name? Then following might work (untested):

$('.paperTaken').focus(function(){
  $(this).val($(this).siblings('.name').text());
});

---

Related Topics