How can we retrive style from css by selector without creating element?


Tags: javascript,css

Problem :

Suppose we have 2 css files First has

.x { background-color="red" }

second has

div { border=1 }
div:hover { border=2 }

How can we get style of by javascript without creating new element just to get its style?

And even if we need to create new element for get the style or not. How we can get it with and without hover ?

Are there any functionality like document.queryStyle({ type:"div",class:"x",hover:true }) or anything like this?



Solution :

There is usually no problem with creating the element and removing the element right after, because the visitor will never see it.

Solution with jquery:

$div = $('<div class="border"></div>');
$('body').append($div);
var css = $div.css("border");
$div.remove();

HTML

<div class="content">
    hello world
</div>

CSS

div.border {
   border: 1px solid black;
}

JsFiddle example: http://jsfiddle.net/ypUKC/

If you really can't create the element, google for "Javascript CSS Parser".

By the way, your CSS Syntax is incorrect. It's "div { border: 1px; }", not "div { border = 1 }"


    CSS Howto..

    SASS: How to exclude part of selector

    How to fix css tabs which disappear when header title is too long

    CSS: How to make the padding-right between li even?

    How to make sure items are added to the end of a moving list?

    JavaFX 8 - How to change the color of the prompt text of a NOT editable combobox via CSS?

    How to keep Fixed position navigation static positioned when resizing window

    How to disable mask on selected image in the f/ckeditor in webkit, opera browsers?

    How to test a webpage for different aspect ratios

    CSS Bootstrap AngularJS - How to reduce table row height?

    how to increase/decrease font-size from external css [closed]

    How to apply class only for IE?

    How can I make this menu using only ul, li and css?

    CSS how to fix an element to scroll horizontally with the page but not vertically?

    How to switch between specific CSS files using jQuery?

    How to center verticaly n inline containers with different font-size?

    CSS: How to get a positioned div to resize horizontally with window instead of getting scrollbars

    How to add a CSS table next to my google map?

    Live search div not showing up when something is entered

    How to have menu items streched in full width menu with css for any screen automatically

    How do I fix the navigation menu in Firefox and Internet Explorer?

    Background-Image does not show properly on IE8

    how to get text beside image button using CSS

    How does Mashable.com displays/hides an element through Css?

    How to select child element inside first, second or third html element with CSS classes?

    How to dynamically create '@-Keyframe' CSS animations

    How to create a web page with 4 rectangurlar splits?

    How Can I Remove a Surrounding DIV with jQuery?

    when we have a double border in a table , how do we fill in the gap beetween the two borders

    How to add another line on overflow in a text input?

    How to select nth child with css? [duplicate]