I have the following CSS  .EggChart {     width: 5000px;     height: 400px; }   and would like to read the value of height from the CSS class specification, either using raw JavaScript or in jQuery. If the class has been applied to an element of the DOM this seems straightforward: I'd select the elements of the DOM with this class and read their CSS attributes, but if the class has not been applied to any DOM element how would I do this?
10666
I would like to return a string with all of the contents of a CSS rule, like the format you'd see in an inline style. I'd like to be able to do this without knowing what is contained in a particular rule, so I can't just pull them out by style name (like .style.width etc.)   The CSS:  .test {     width:80px;     height:50px;     background-color:#808080; }   The code so far:  function getStyle(className) {     var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules     for(var x=0;x&lt;classes.length;x++) {         if(classes[x].selectorText==className) {             //this is where I can collect the style information, but how?         }     } } getStyle('.test')
63272
I have some LaTeX code  \begin{figure}     ABC     \caption{def} \end{figure}   And I would like to be able to find its height in a pdf output. The method outlined  doesn't work, yielding the error:  ! LaTeX Error: Not in outer par mode.   I considered the idea of using \write18 and somehow measuring the size of the figure by itself using pixel-grabbing tricks, but if the document had a globally changed caption size, that would mess things up.  I was wondering if there was a valid way to do this.
52458
I am creating a jQuery plugin.  How do I get the real image width and height with Javascript in Safari?  The following works with Firefox 3, IE7 and Opera 9:  var pic = $("img")  // need to remove these in of case img-element has set width and height pic.removeAttr("width");  pic.removeAttr("height");  var pic_real_width = pic.width(); var pic_real_height = pic.height();   But in Webkit browsers like Safari and Google Chrome values are 0.
10567
It's easy to set inline CSS values with javascript. If I want to change the width and I have html like this:  &lt;div style="width: 10px"&gt;&lt;/div&gt;   All I need to do is:  document.getElementById('id').style.width = value;   It will change the inline stylesheet values. Normally this isn't a problem, because the inline style overrides the stylesheet. Example:  &lt;style&gt;    #tId {       width: 50%;    } &lt;/style&gt;  &lt;div id="tId"&gt;&lt;/div&gt;   Using this Javascript:  document.getElementById('tId').style.width = "30%";   I get the following:  &lt;style&gt;    #tId {       width: 50%;    } &lt;/style&gt;  &lt;div id="tId" style="width: 30%";&gt;&lt;/div&gt;   This is a problem, because not only do I not want to change inline values, If I look for the width before I set it, when I have:  &lt;div id="tId"&gt;&lt;/div&gt;   The value returned is Null, so if I have Javascript that needs to know the width of something to do some logic (I increase the width by 1%, not to a specific value), getting back Null when I expect the string "50%" doesn't really work.  So my question: I have values in a CSS style that are not located inline, how can I get these values? How can I modify the style instead of the inline values, given an id?
32885
I have some html like this:  &lt;div id="1"&gt;     &lt;p&gt;         Volume = &lt;input type="text" /&gt;         &lt;button rel="3.93e-6" class="1" type="button"&gt;Check answer&lt;/button&gt;     &lt;/p&gt;     &lt;div&gt;&lt;/div&gt; &lt;/div&gt;   and some JS like this:  $("button").click(function () {     var buttonNo = $(this).attr('class');     var correct = Number($(this).attr('rel'));      validate (Number($("#"+buttonNo+" input").val()),correct);     $("#"+buttonNo+" div").html(feedback); });   What I'd really like is if I didn't have to have the class="1" on the button (I know numeric classes aren't valid, but this is a WIP!), so I could determine buttonNo based on the id of the parent div. In real life there are multiple sections looking like this.   How do I find the id of the div parenting the button. What would be a more semantic way to store the answer in the button code. I want to make this as foolproof as possible for a non programmer to copy and paste without breaking things!
31438
Can anyone please help me to understand the below code. I am not able to understand how we are  extracting value from map on visualforce page.  Actually i am trying to get the size of value list which is associated with respective key in map.              &lt;apex:outputPanel &gt;                 &lt;apex:repeat value="{!attributeWrapper.mapAllAttributesLabel}" var="M"&gt;                     &lt;div&gt;                         &lt;div&gt;{!attributeWrapper.mapLabels[M].Name} &lt;/div&gt;                         &lt;div&gt;                             &lt;ul&gt;                                 &lt;apex:repeat value="{!attributeWrapper.mapAllAttributesLabel[M]}" var="attribute"&gt;                                     &lt;li&gt;                                     &lt;p&gt;                                         &lt;apex:outputLink onclick="selectAttribute('{!attribute.attributeLabel.Label__c}','{!attribute.attributeLabel.Attribute__c}');return false;"&gt;                                            &lt;apex:outputLabel value="{!attribute.attributeLabel.Attribute__r.Name}"/&gt;                                         &lt;/apex:outputLink&gt;                                     &lt;/p&gt;                                     &lt;/li&gt;                                 &lt;/apex:repeat&gt;                             &lt;/ul&gt;                         &lt;/div&gt;                     &lt;/div&gt;                 &lt;/apex:repeat&gt;             &lt;/apex:outputPanel&gt;    public with sharing class AttributeWrapper {      public Map&lt;String, List&lt;AttributesLabelWrapper&gt;&gt; mapAllAttributesLabel{       // some code to populate this map     } }   If i do:  {!attributeWrapper.mapAllAttributesLabel[M].size}   I get an error so how do i get the size of value list on VF page?
17906
How would I go about finding the actual colour (like the RGB/HSV/etc) of a particular element in a given beamer colour theme (e.g., block title bg in orchid)?  I would like to use these colours in creating graphics with external programs. For example, I made a map in ArcGIS, and since it's quite a simple map, there's no reason not to choose colours which are consistent with the beamer theme I'm using.  From  and , I know that you can directly call the colours within a LaTeX document, but I'm asking about getting colour values for use outside of LaTeX.  EDIT Both answers below are great, thanks so much. I wasn't sure how to pick the accepted answer, so I just chose the one which seemed to accomplish the goal in fewer lines of code.
36608
I can get the element like this $("#txtEmail") but I'm not sure how to get the actual value.
25676
I'm a web developer and I love Photoshop but unfortunately I have some design mock-ups sent over to me in Illustrator. When I viewed the document at 100% the text isn't even legible on my monitor. At 150% things looks like they could be an actual web page and everything is clear.  I'm thinking the designer used a screen resolution that really doesn't convert well for web.  How can I view/change the document's screen resolution to say, 72ppi from whatever it is now?  If you think I'm asking the wrong question then here is an alternate: How can I figure out what width (in pixels) the designer actually intended for design?
57981
My program need to parse css files into an in-memory object format. Any advice on how this should be done ?
12792
My DOM looks like this:  &lt;div id="d1"&gt;    &lt;div class="c1"&gt;             &lt;a href="#"&gt;&lt;img src="img1_on.gif"&gt;&lt;/a&gt;             &lt;a href="#"&gt;&lt;img src="img2_on.gif"&gt;&lt;/a&gt;    &lt;/div&gt; &lt;/div&gt;   When someone clicks on an image, I want the image src to change to &lt;img src="imgx_off.gif"&gt; where x represents the image number 1 or 2.  Is this possible or do I have to use CSS to change the images?
105678
My code looks like this:  &lt;ul id="ulList"&gt;   &lt;li class="listClass" id="id1"&gt;&lt;a href="http://link1"&gt;Link 1&lt;/a&gt;&lt;/li&gt;   &lt;li class="listClass" id="id2"&gt;&lt;a href="http://link2"&gt;Link 2&lt;/a&gt;&lt;/li&gt;   &lt;li class="listClass" id="id3"&gt;&lt;a href="http://link3"&gt;Link 3&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;   Now I like to get the following:  All links as an array  All ids of li as an array  Can someone help me please?
32196
I am wondering how I can read CSS comments out of a linked stylesheet.  I have this sample CSS loaded via:  &lt;link rel="stylesheet" type="text/css" media="all" href="test.css" /&gt;   &nbsp;  #test1{ border:1px solid #000; } #test2{ border:1px solid #000; } #test3{/* sample comment text I'm trying to read */}   I'm testing this in FF3. The following javascript reads the rules but doesn't read the comments in#test3.  window.onload = function(){     s=document.styleSheets;     for(i=0;i &lt; s[0].cssRules.length;i++){         alert(s[0].cssRules[i].cssText);     } }
70880
Motivated by .  We currently have a rather rich subset of end-to-end tests for our AngularJS applications. And, we do get a lot of visual/layout/design issues on every single development iteration. Usually, we do not cover this kind of issues with end-to-end tests and testing the fixes manually. The reasoning was always - too hard, too fragile, too expensive to automate.  In some cases though, a style of an element or block on a page is really critical for an end-user and it would make sense to have an automated end-to-end test checking it. We try to check the colors, font styles and other CSS properties inside our Protractor tests, but it is still checking only these specific things and not an element or part of a page as a whole. Plus, the assertions themselves are not readable and easy to break, for example:  expect(somePage.someElement.getCssValue("background-color")).toEqual("rgba(255, 211, 205, 1)");     We are thinking of adding some sort of a visual component to our tests. Ideally, comparing screenshots of what we expect an element to look like and how it actually looks. But, there are a lot of open questions at this point:   how reliable can it be - would it depend on the browser, resolution and other parameters of the test machine setup? is it possible to integrate with our existing Protractor test codebase or we need a separate specialized tool for that? test result reporting - how would we present the test results?   Have you done something similar and how did you address the above mentioned issues? Was it worth the cost of maintenance?
77652
This might be a silly question, but I can't seem to be able to find the answer anywhere: suppose I have this simple plain TeX code:  \newskip\myskip \myskip = 10pt plus 4pt minus 2pt   Now, how can I access (read) those stretch and shrink parts, those 4pt and 2pt values?  After David's answer: this is what I wanted:  %%%! tex \newskip\spaceskipFixed  % nonsensical values just for testing \spaceskipFixed = 10pt plus 4pt minus 2pt \spaceskip = \spaceskipFixed  % wrong, glue becomes dimen, stretchability and shrinkability gone \def\modifyspaces #1 {%     \spaceskip = #1\spaceskipFixed }  \def\text{Aha oho haha hoho!} \newbox\gauge \setbox\gauge = \hbox{\modifyspaces .5 \text} \def\showline #1#2{     \line{\hbox to\wd\gauge{#1\hfill}\hskip 2em {\spaceskip = 0pt\tt\% #2}\hfill} }  \line{\text\hskip 2em{\spaceskip = 0pt\tt \% unmodified, wild spaces}\hfill} \vbox to 0pt{\noindent\kern \wd\gauge\hbox{\vrule width .1pt height 0pt depth 15mm}\par\vskip -15mm} \showline{\modifyspaces .5 \text}{simple text with modified spaces, width \the\wd\gauge} \showline{\hbox to 92pt {\modifyspaces .5 \text}}{hbox to 92pt, no shrinkability =&gt; overfull}  % fixed \def\modifyspaces #1 {%     \spaceskip = #1\spaceskipFixed plus #1\gluestretch\spaceskipFixed minus #1\glueshrink\spaceskipFixed } \showline{\hbox to 92pt {\modifyspaces .5 \text}}{hbox to 92pt, shrinkability preserved, all shiny} \bye
37877
I have an image URL in a imageUrl variable and I am trying to set it as CSS style, using jQuery:  $('myObject').css('background-image', imageUrl);   This seems to be not working, as:  console.log($('myObject').css('background-image'));   returns none.  Any idea, what I am doing wrong?
51982
I need a CSS selector that can find the 2nd div of 2 that has the same class. I've looked at nth-child() but it's not what I want since I can't see a way to further clarify what class I want. These 2 divs will be siblings in the document if that helps.  My HTML looks something like this:  &lt;div class="foo"&gt;...&lt;/div&gt; &lt;div class="bar"&gt;...&lt;/div&gt; &lt;div class="baz"&gt;...&lt;/div&gt; &lt;div class="bar"&gt;...&lt;/div&gt;   And I want the 2nd div.bar (or the last div.bar would work too).