/    Sign up×
Community /Pin to ProfileBookmark

styles there has to be a way

Copy linkTweet thisAlerts:
May 14.2008

there must be a way to get the style of an element.

i want to be able to click some text, and it tell me the size, the color, the family.

i found this function

[CODE]//gets a style
function getStyle(oElm, strCssRule){
var strValue = “”;
if(document.defaultView && document.defaultView.getComputedStyle){
strValue = document.defaultView.getComputedStyle(oElm, “”).getPropertyValue(strCssRule);
}
else if(oElm.currentStyle){
strCssRule = strCssRule.replace(/-(w)/g, function (strMatch, p1){
return p1.toUpperCase();
});
strValue = oElm.currentStyle[strCssRule];
}
return strValue;
}[/CODE]

but that only gets an inline style.

if i have <span id=”red”>text</span> i should somehow be able to tell that its red, even if its defined in the head or a in another file, the browser must do something to display as red, how can get the color?

anyone have a clue?

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@toicontienMay 14.2008 — That function gets the computed style of an element, which it sounds like that's what you want. In fact, it is not getting inline styles. An inline style is:
&lt;div [B]style="color: red;"[/B]&gt;&lt;/div&gt;
The computed style for colors will probably return a color code in RGB format: rgb(255,0,0) --- Would be pure red.
Copy linkTweet thisAlerts:
@optikalefxauthorMay 14.2008 — if only that were the case.

if i have <div style="color:red">text</div>

that returns rgb(255,0,0)

but if i have

<style type="text/css">

#myElm {color:red}

</style>

<body>

<div id="myElm">text</div>

</body>

that returns rgb(0,0,0) which is incorrect
Copy linkTweet thisAlerts:
@JMRKERMay 14.2008 — if only that were the case.

if i have <div style="color:red">text</div>

that returns rgb(255,0,0)

but if i have

<style type="text/css">

#myElm {color:red}

</style>

<body>

<div id="myElm">text</div>

</body>

that returns rgb(0,0,0) which is incorrect[/QUOTE]

What does it return if you do this?
[code=php]
alert(document.getElementById('myElm').style.color);
[/code]
Copy linkTweet thisAlerts:
@toicontienMay 14.2008 — The getStyle function returns the [I]computed[/I] style of a DOM node, not the value of the DOM node's style object. JMRKER has the right idea. You need to use the style object of the DOM node.
Copy linkTweet thisAlerts:
@optikalefxauthorMay 15.2008 — it returns blank, not even NULL

unless the inline style color is defined, then it displays that

it doens't work for the old <font color="red">
Copy linkTweet thisAlerts:
@optikalefxauthorMay 15.2008 — finally success

its inconsistent, but this is basically how it works

function detectColor(e) {

alert(getStyle(e.target,"font-color")+"n"+getStyle(e.target,"font-size")+"n"+getStyle(e.target,"font-family"));

}

function getStyle(el,styleProp) {

var style = editDoc.defaultView.getComputedStyle(el, '').getPropertyValue(styleProp);


return style;

}

this is FF only, and editDoc is defined as gBrowser.selectedBrowser.contentDocument
×

Success!

Help @optikalefx spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...