Menu
width: attr(data-width); I want to know if there's any way it's possible to set a css value using HTML5's data- attribute the same way that you can set css content. Currently it doesn't work.
HTML
<div data-width="600px"></div> CSS
div { width: attr(data-width) } 
631
Getting a data attribute's value in CSS #You can access the content of a data attribute with the attr() CSS function. In every major browser, it's use is limited to the content property. For example, let's say you wanted to add some content dynamically to a component based on a data attribute value. You could do this.
Using the same attribute name twice in a tag is considered an internal parse error. It would cause your document to fail validation, if that's something you're worried about. However, it's important to understand that HTML 5 defines an expected result even for cases where you have a "parse error".
The multiple attribute in HTML allows user to enter more than one value. It is a Boolean attribute and can be used on <input> as well as <select> element, To allow multiple file uploads in HTML forms, use the multiple attribute.
Definition and Usage The data-* attribute consist of two parts: The attribute name should not contain any uppercase letters, and must be at least one character long after the prefix "data-" The attribute value can be any string.
Note that, as data attributes are plain HTML attributes, you can even access them from CSS. For example to show the parent data on the article you can use generated content in CSS with the attr() function: You can also use the attribute selectors in CSS to change styles according to the data:
Whenever content in a page changes, the usual process is to show the changed content through Javascript (appening new HTML). But this can be alternatively done by using data-attributes in CSS — whenever value of data-attribute changes, the new value is rendered automatically in the page.
In CaioToOn's fiddle the CSS code can use the data properties for setting the content. Unfortunately it is not working for the width and height (tested in Google Chrome 35, Mozilla Firefox 30 & Internet Explorer 11).
In the above example whenever value of data-point changes, the rendered content of #container::before will be changed to the new value of the attribute. You can also set specific CSS properties when the value of the data-attribute equals a specific value.
There is, indeed, prevision for such feature, look http://www.w3.org/TR/css3-values/#attr-notation
This fiddle should work like what you need, but will not for now.
Unfortunately, it's still a draft, and isn't fully implemented on major browsers.
It does work for content on pseudo-elements, though.
174
You can create with javascript some css-rules, which you can later use in your styles: http://jsfiddle.net/ARTsinn/vKbda/
var addRule = (function (sheet) { if(!sheet) return; return function (selector, styles) { if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length); if (sheet.addRule) return sheet.addRule(selector, styles); } }(document.styleSheets[document.styleSheets.length - 1])); var i = 101; while (i--) { addRule("[data-width='" + i + "%']", "width:" + i + "%"); } This creates 100 pseudo-selectors like this:
[data-width='1%'] { width: 1%; } [data-width='2%'] { width: 2%; } [data-width='3%'] { width: 3%; } ... [data-width='100%'] { width: 100%; } Note: This is a bit offtopic, and not really what you (or someone) wants, but maybe helpful.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
