How to Fetch the Value of a Non-Standard CSS Property via JavaScript

Can I fetch the value of a non-standard CSS property via Javascript?

Firefox does not carry over tags, attributes or CSS styles it does not understand from the code to the DOM. That is by design. Javascript only has access to the DOM, not the code. So no, there is no way to access a property from javascript that the browser itself does not support.

How to set non-standard css properties using Jquery?

You can set whole style attribute manually

var style_text = '';
$.each(styleCSS, function(k,v) {style_text += k+':'+v+';';});
$('.container').find('.hide-me').attr('style', style_text);

styleCSS = {

    'display': 'none',

    'height' : '0px',

    'line-height' : '0px',

    'max-height' : '0px',

    'overflow' : 'hidden',

    'font-size': '0px',

    'mso-hide' : 'all',

    'width' : '0px',

    'max-width' : '0px'

};

var style_text = '';

$.each(styleCSS, function(k,v) {style_text += k+':'+v+';';});

$('.container').find('.hide-me').attr('style', style_text);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">

  <div class="hide-me">foo</div>

  <div>bar</div>

</div>

Get all available values of css property

No, I don't think there's anywhere in the standard browser environment (such as it is!) accessible with JavaScript that lists all of the possible values of CSS properties. (Not even for those properties that do have a constrained set of possible values.)

This information is covered by various specifications, though, the CSS 2010 snapshot covers the main body of it (the list of properties is particularly useful for what you're describing). The CSS Basic User Interface Level 3 CR also has a lot of stuff (box-sizing, for instance), and there are several further proposals covered in various additional CRs and LCs [and even WDs] on the W3C website.

Those are primary sources. (I prefer to cite primary sources.) There seems to be a pretty good secondary source here, without (as of this writing) massive adverts, and with links per property to both primary (W3C) and useful secondary (MDN) sites.

Using non-standard attributes

Without knowing why you need to attach all that data to DOM elements it's hard to give concrete advice.

First, I'd consider using data- attributes.

Second, I'd consider using jQuery's data() method if you're attaching the data dynamically.

Third, I'd consider what data you actually need, and when.

Fourth, and probably most importantly, the ID attribute probably isn't really what you want to be setting.

Use a data-id element and get the ID that way; a simple numeric value isn't a valid ID. Unless you actually need to refer to the DOM element by ID, why bother? Usually what you really need is to just look up (or down) the nearby hierarchy and find the parent row etc. to pull out a single value, like data("id").

---

Related Topics