Jquery/JavaScript CSS("Width")/Check If Style Is Defined in CSS

jQuery/Javascript css(width) / check if style is defined in css?

I have a workaround idea that might work.

Define a class named default_width before all other style sheets:

.default_width { width: 1787px }  
/* An arbitrary value unlikely to be an image's width, but not too large
   in case the browser reserves memory for it */

to find out whether an image has a width set:

• Clone it in jQuery: element = $("#img").clone()

• give the cloned element the default_width class: element.addClass("default_width")

• If its width is 1787px, it has no width set - or, of course, is natively 1787px wide, which is the only case in which this method will not work.

I'm not entirely sure whether this will work, but it might. Edit: As @bobince points out in the comments, you will need to insert the element into the DOM for all classes to be applied correctly, in order to make a correct width calculation.

jQuery check if CSS width is greater than 0 then add CSS property

You could simplify it to the following:

Example Here

$('.neo-P4EMilestonesMilestone').each(function () {
    $(this).css('display', $(this).width() > 0 ? 'block' : '');
});

Your code snippet wasn't working for a couple reasons. For one, there were syntax errors. In addition, when you retrieve the element's width via $(this).css('width'), the px unit is included. You would have had to parse the string parseInt($(this).css('width'), 10) in order to check if it is greater than 0. Instead of doing that, you can just retrieve the width using $(this).width(), and then that isn't necessary.

How to get defined width of element via JS?

EDIT

One point my original answer missed is: If the element has an inline style being applied, use that, then look to the stylesheet if there is no inline style.

getComputedStyle will give you the actual width of the div, not the width specified in the style sheet.

If you need to find out the rules defined in a stylesheet, not the actual style values of an element, you can do so by iterating over the stylesheet.

let cssRules = Array.from(document.styleSheets[0].rules); //the 3 styles youve set
function getStylesheetPropertyForElement(id, property) {
    let element = document.getElementById(id), appliedStyle ="";
    if (!element) return false;
    // prefer inline style if available!
    if (element.style[property]) return element.style[property];//
    // reverse the order of the rules. 
    // naively assumes the most recent rule is the one thats applied
    // makes no attempt to handle priority and !important
    cssRules.reverse().some(rule => {
        // does the selector for this rule match?
        if (element.matches(rule.selectorText)) {
            //yes. is there a rule for the required property?
            if (Array.from(rule.style).some(el=>el === property)) {
                // great
                appliedStyle = rule.style[property];
                return true;
            }
        }
    });
    return appliedStyle;
}
console.log(getStylesheetPropertyForElement('item1', 'width')); //auto
console.log(getStylesheetPropertyForElement('item2', 'width')); //50%
console.log(getStylesheetPropertyForElement('item3', 'width')); //""

#item1 { width: 200px; }
#item2 { width: 50%; }

#item1, #item2, #item3 { background: #ccc; margin: 2px; padding: 5px }

<div id="item1" style="width: auto">Box 1</div>
<div id="item2">Box 2</div>
<div id="item3">Box 3</div>

jQuery check if element has a specific style property defined inline

Here's a very simple (probably in much need of improvement) plugin I've thrown together that will get you the value of an inline style property (and return undefined if that property is not found):

​(function ($) {
    $.fn.inlineStyle = function (prop) {
         var styles = this.attr("style"),
             value;
         styles && styles.split(";").forEach(function (e) {
             var style = e.split(":");
             if ($.trim(style[0]) === prop) {
                 value = style[1];           
             }                    
         });   
         return value;
    };
}(jQuery));

You can call it like this:

//Returns value of "width" property or `undefined`
var width = $("#someElem").inlineStyle("width");

Here's a working example.

Note that it will only return the value for the first element in the matched set.

Since it returns undefined when that style property is not found, you can use it in your situation like this:

if (base.$element.inlineStyle("width")) {
    // It has a `width` property!
}

---

Update

Here's a much, much shorter version. I realised that prop("style") returns an object, not a string, and the properties of that object correspond to the available style properties. So you can just do this:

(function ($) {
    $.fn.inlineStyle = function (prop) {
        return this.prop("style")[$.camelCase(prop)];
    };
}(jQuery));

You may want to replace the use of $.camelCase with a custom camelcase function, since the jQuery one appears to be undocumented and is probably not good to rely upon. I just used it here as it's shorter.

Here's a working example of that one. Note that in this case, the return value will be the empty string if the style was not found on the element. That will still evaluate to false, so the above if statement should still work.

Need to know in jQuery if a max-width value is in % or px

The strange thing is that Louys Patrice Bessette and Mayday are both right.

Mayday's answer is correct... If you test it in Chrome! .css('width') will return in px (even if set in %), whereas .css('max-width') will return % when using that unit! In Firefox, however, the value is always px. You can test this with the code below and open in Firefox as well as Chrome.

console.log($('div').css('max-width'));console.log($('div').css('width'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div style="width: 80%; max-width: 80%">  Bananas</div>

Get inline css width property from element jQuery

You can directly access the style property of the element to get the defined width.

console.log($(".progress").find(".progress-bar").css('width'));console.log($(".progress").find(".progress-bar")[0].style.width);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="progress xs" style="margin-bottom: 0px; height: 3px;">  <div class="progress-bar progress-bar-green" style="width: 100%;"></div></div>

Check if max-width is set, in jQuery?

By default .css('max-width') will return "none" if no max-width was defined, so the following condition should do the job:

if ($(this).css('max-width') !== 'none') { ... }

If you need to check for inline style only, meaning that you override the original max-width CSS property (e.g. from the stylesheet file), you may do the following:

if (this.style.maxWidth !== '') { ... }

... as pure maxWidth property of style will be empty "" if the CSS property was not set.

---

Related Topics