/    Sign up×
Community /Pin to ProfileBookmark

Read Attribute inside Tag

Copy linkTweet thisAlerts:
Jul 31.2006

Hi All,

Is it possible to read the value of attribute inside <LI> tag. I have defined my own attribute there.

[CODE]
<LI id=”firstitem” remove=”yes”>
<LI id=”seconditem” remove=”no”>
[/CODE]

I have to read the remove attribute and its value and then have to do some functioning on that. If its not possible, can anyone tell me some alternative way. I would appreciate if somebody please help in this regard.

Best Regards,
Inderpal Singh

to post a comment
JavaScript

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@CharlesJul 31.2006 — You're not allowed to define your own attributes, not in HTML. Use the "class" attribute instead. Know, however, that because "class" is a reserved word in some scripting languages, and JavaScript is not oficially the default scripting language in HTML nor is it the only language supported by browsers, you need to use "className" in place of "class"[code=html]<LI id="firstitem" class="yes" onmouseover="alert (this.className)">Foo
<LI id="seconditem" class="no" onmouseover="alert (this.className)">Bar[/code]
Copy linkTweet thisAlerts:
@JUDJul 31.2006 — Try this.

It works fine, but will not validate because remove is not a valid attribute.

[code=html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
// <![CDATA[
onload = function(){
var item1 = document.getElementById('firstItem');
var item2 = document.getElementById('secondItem');

alert(item1.getAttribute('remove'));
alert(item2.getAttribute('remove'));
}
// ]]>
</script>
</head>

<body>
<li id="firstItem" remove="yes"></li>
<li id="secondItem" remove="no"></li>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@inderpalauthorJul 31.2006 — Hi Jud,

I read the attribute using getAttribute() method and it's working fine. Let me know if there are any issues associated wiith it.

Regards,

Inderpal Singh
Copy linkTweet thisAlerts:
@CharlesJul 31.2006 — Hi Jud,

I read the attribute using getAttribute() method and it's working fine. Let me know if there are any issues associated wiith it.

Regards,

Inderpal Singh[/QUOTE]Try it on some more browsers and you won't be so happy with it. Best to use "class".
Copy linkTweet thisAlerts:
@inderpalauthorJul 31.2006 — Hi,

I have tried Firefox as well as IE and it's working fine in both. Let me know if there are any performance issues with getAttribute() method.

Best Regards,

Inderpal Singh
Copy linkTweet thisAlerts:
@KorJul 31.2006 — Try it on some more browsers and you won't be so happy with it. Best to use "class".[/QUOTE]
But what if the elements have a real class, and the same class?

Hm... I use for years "faux" HTML attributes, same as

<li id="firstItem" remove="yes"></li>

and I have always been able to return their values with getAttribute() or even better with getAttributeNode().nodeValue with no problem, on all the main browsers I have tested.... But if you say so, I migh believe you, Charles... But, for instance, which browser might refuse return those values?

Anyway, there might be a third way, creating dynamically onload the property of the objects
<i>
</i>&lt;script type="text/javascript"&gt;
onload = function(){
var item1 = document.getElementById('firstItem');
var item2 = document.getElementById('secondItem');
item1.remove='yes';
item2.remove='no';
}
&lt;/script&gt;

Well, in this case, to return those values you must use javascript object's syntax, not setAttribute() method
Copy linkTweet thisAlerts:
@CharlesJul 31.2006 — which browser might refuse return those values?[/QUOTE]I never break the rules myself, so I couldn't tell you first hand. But last I checked, and that was quite a few years ago,there are over three hundred different browsers out there.

Elements can have multiple classes, http://www.w3.org/TR/REC-html40/struct/global.html#adef-class that's how you get around your problem of trying to use class for double duty. And note, using class allows you to employ CSS to provide visual clues as to what is going on. You may not want to do so now but in the future?
Copy linkTweet thisAlerts:
@felgallJul 31.2006 — I have seen lists of several hundred browsers just for Mac so there are probably over 1000 different browsers in all. Many of these browsers will run on non-computer devices and will therefore not have as much memory to work with as browsers running on computers. They will therefore strictly apply the rules of what is HTML and will ignore everything else. If you want your page to work properly then it needs to use valid HTML. You can always apply as many different classes as you need to a single tag just by separating the class names with spaces.
Copy linkTweet thisAlerts:
@KorJul 31.2006 — well... hm... rules are made sometimes to be broken... I can not explain otherwise why Mozilla included in its new browsers some IE non-standard IE only methods/events, such as innerHTML/onbeforeunload...
×

Success!

Help @inderpal 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.17,
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,
)...