|
CSS - How To Access A Css Style Attribute Of A Class?
I am trying to retrieve the color and background attributes of a CSS class defined in a .css external file. I would like to retrieve the attributes in a JavaScript function, given the class name.
I am trying to invert the colors of a table cell background and hyperlink text. --begin style sheet-- table.submenu { background:#66CCFF; position:absolute; visibility:hidden; font:8pt Arial; font-weight:bold; color:#FFFFFF; text-decoration:none; } a.menulink:link,a.menulink:visited,a.menulink:active { color:#FFFFFF; text-decoration:none; font-weight:bold; } --end style sheet- --begin javascript-- function invertmenu(elmntID,elmntClass) { //the first two lines of code do not work var textColor = elmntClass.style.color; var backColor = elmntClass.style.background; document.all[elmntID + "link"].style.color = backColor; document.all[elmntID].style.background = textColor; } --end javascript-- --begin html code-- <tr><td class="submenu" id="techdept1" onmouseover="invertmenu('techdept1','submenu')" onmouseout="invertmenu('techdept1','submenu')"><a href="t40/default.asp" class="menulink" id="techdept1link">T-40</a></td></tr> --end html code-- thanks for your help! - tim Similar TutorialsHi people, What is the equivalent of this div style attribute in css? <div style="overflow: hidden; position: absolute; left: 0px; top: 0px; width: 500px; height: 300px"> Its the overflow what I'm looking for. -just edited this that I have the solution sorry beginners corner Can someone tell me why css style settings for links won't effect a mailto: link? Is there anyway to make it happen without individually coding style into each mailto: link? Thanks, HeadElf For reasons of compliance with the SEC, I can't use cascading style sheets, but rather, I have to generate style attributes for each individual element (e.g.
Code:
<p style="width:436pt; margin:0pt; padding:6pt 0pt 0pt 20pt;
font-family:serif; font-weight:normal; color:#000000;
font-size:10pt; text-align:left; font-style:normal;
line-height:12pt; background-color:#FFFFFF;" >text </p>
don't get me started on how rediculous this is). Its stupid, but it works. What I can't figure out is how to apply something like Code: <style type="text/css" media="print">
hr {visibility:hidden}
</style>
to <hr style" ??? "/> any suggestions would be much appreciated -LG I have an assignment and it says "A class attribute for text to be used with the DIV tag, named SPECIAL (for division), which indents the text division (all lines in the division) by 25 pixels and sets the font size to 14 point. " I am not sure how to write this out in CSS format, can someone help me? I've got a dynamically generated <select> list, where the <option>s are styled using both 'class' and 'style' - like in the following example: PHP Code: <style> .thm_img { height:30px; } </style> <select> <option class="thm_img" style="background: #99CC00;" value="1" >Image 1</option> <option class="thm_img" style="background: #FF3300;" value="2" >Image 2</option> <option class="thm_img" style="background: #CC9999;" value="3" selected="selected" >Image 3</option> </select> No big deal - pretty standard stuff. The "selected" <option> displays in the 'visible' part of the field and also as part of the drop list ... as one would expect. But, and this is where I am baffled - the attributes from both class and style show up in the option listing, whilst only the 'class' attributes show up in the 'visible' part of the list. If I'm not making any sense here, just cut and paste the above code into an html editor to see what I mean. You'd note that 'Image 3' has a white background in the visible part of the field, but a coloured background in the drop list. Would anyone know why the attributes from the 'style' aren't being applied but that from the 'class' is ? ... and how (if possible) would I resolve this without combining the style into the class (since combining them is not an option - no pun intended). Cheers Hi, I have this style for font size. I then use span class to use it, but it only works in IE and not FF. Any ideas why? Have i got something wrong with it? PHP Code: .11px { font-family: verdana, arial, tahoma; font-size: 11px; } I am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule: Code:
.textarea-box {
color: #990000;
background-color: #fff;
width: 375px;
height: 200px;
border: #000 solid 1px;
}
...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule? Thanks for help with this. j9 I have a menu bar made up of <a href> elements that have a hover style of:
PHP Code: #mainMenu a:hover { color:#000000; background-color: #66c74c; padding: 1px 4px 1px 4px; margin: 1px 1px 1px 1px; } This will provide a green colored rollover visual as the user moves their mouse over the menu bar. I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code: //--- Simplify setup by creating an array of the menus and hilight ID's --- var menus = ["menu1","menu2","menu3","menu4","menu5", "menu6","menu7","menu8","menu9","menu10"]; function J_hiliteMenu(menu) { //--- first make sure all the menu are hidden and unhilited --- for(i=0; i < menus.length; i++) { if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position var obj = document.getElementById(menus[i]); if (obj == null) continue; // if menu is not available skip it obj.style.color = "#ffffff"; obj.style.backgroundColor = "#234fd7"; } //--- hilite the menu we're interested in --- var obj = document.getElementById(menu); obj.style.color = "#000000"; obj.style.backgroundColor = "#f8f400"; } Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript? Thanks! hey, I got a table, every <td> in the table got the css class .regular. (<td class='regular'>). When the user moves their mouse over a row, that row should change color. This works with the following code: <tr onmouseover='this.className=\"hoverRow\"'> However, this only works if the td's in that row have no class set yet. And since all td's in my table have a class set allready, i cant use this. How can i overwrite the class of the td's by the class for the whole row? thanks in advance Using the following example: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
a
{
display: block;
}
a.one.on, a:hover.one, a:hover.one.on
{
color: red;
}
a.two.on, a:hover.two, a:hover.two.on
{
color: orange;
}
a.three.on, a:hover.three, a:hover.three.on
{
color: green;
}
</style>
</head>
<body>
<a href="#" class="one">one</a>
<a href="#" class="two">two</a>
<a href="#" class="three">three</a>
<p> </p>
<a href="#" class="one on">one</a>
<a href="#" class="two on">two</a>
<a href="#" class="three on">three</a>
</body>
</html>
Notice how, in IE6 (works fine in FF), when the secondary style named 'on' is added, all 3 links in the 2nd set display the properties of the style: Code: a.three.on, a:hover.three, a:hover.three.on
{
color: green;
}
(since it is last in the list) rather than the style specified by their respective numbers (i.e. 'one', 'two' or 'three'). Is there a way to overcome this in IE. I've read several forums and know that the technique I'm trying to achieve is possible, however I can't seem to get it to work. Basically I'm trying to shift the background positions of both the list item I'm hovering over and the next list item. I'm sure its just a syntax error and not a logic error, anyways the code is below - any help would be greatly appreciated! Code:
HTML Code
<div class="menu">
<ul>
<li><a href="#" class="search"></a></li>
<li><a href="#" class="battery"></a></li>
<li><a href="#" class="cart"></a></li>
<li><a href="#" class="contact"></a></li>
</ul>
</div>
CSS
.search, .contact, .cart, .battery
{
width:100px;
height:30px;
margin-left:-1px;
display:block;
}
.search
{
background-image:url(Images/search.png);
}
.contact
{
background-image:url(Images/contact.png);
}
.cart
{
background-image:url(Images/cart.png);
}
.battery
{
background-image:url(Images/battery.png);
}
ul li a.search:hover
{
background-position:0px 60px;
}
ul li a.search:hover ul li a[class=battery]
{
background-position:0px 60px;
}
<div type="test"> I am interested in the type attribute. The reason is this... I have a Janus GridEx on my asp.net form and I want to add some css styles to it. There is no ID defined, nor a class of which I can inherit. I can't modify the code for this tag so I was hoping I could use the type attribute to identify this div in my css.... This is the code for the DIV I'm talking about: Code: <div type="4" style="position:relative;padding:0px 0px;width:100%;overflow-x:auto;overflow-y:auto;"> Anyone has any experience with this? Thanks! I want to set a width for a div so that its left hand edge is at the left edge of the viewing window and its right hand edge is at a particular location in a centered layout and retains that width (ie it stretches) when the window is resized. A percent width will not achieve this. Can anyone explain how it can be done? I'm using frames and I want all my anchors to launch in a separate frame. Right now I'm doing: Code: <a href="http://example.com" target="MAIN">example</a> Can I put something in my stylesheet that will automatically launch all links in the "MAIN" frame? Thanks. Attempting to inherit all main attributes of a column, and modifying few, what is the correct way to inherit/overwrite the attributes of col3 here ? Code: .col3, col3b {
float: left;
position: relative;
background: #FFFFFF;
width: 25%;
height: 80%;
left: 3%;
border-left: 1px solid #333;
margin: 3px 2px 4px 0;
}
.col3b {
border-left: none !important;
}
Tried as well like: Code: .col3 {
}
.col3 .col3b {
border-left: none !important;
}
note: not talking about a single 'inherit' value I'm quite fluent in xhtml, css, and other crap...but I'm not sure why this doesn't work -> the height attribute is set to a percentage, yet it doesn't work...I know its acceptable i checked the css reference. view source on this Validated xhtml strict 1.01 EDIT: I FIGURED IT OUT... I NEEDED TO PUT THIS html, body { height:100% ; width:100% } Hi. I was developing a website . I decided to use float in order to align content on my webpage. Everything worked fine in IE but when I viewed page in NS then linkbar and main area that supposed to be aligned correctly, where collided together. The link to this webpage is: http://www.itcollege.ee/~rbomberg/hagerel/index.php If viewed in NS then you should notice that the links on the left are not aligned properly and main body text is also dislocated. The CSS file used for this website is available at: http://www.itcollege.ee/~rbomberg/hagerel/test.css Thanks for all the help. The title attribute will display black text in a yellow box on the mouse over of an element. Take this code: Code: <a href='#' title='This should be a different background color or something'>text link</a> I want to have the title attribute display with a different background color, different font color and font size. I was wondering how I might use CSS to get into this attribute and do some editing. Thanks in advance, Taylor Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
<!--
body
{
font-family: tahoma, verdana, arial
}
#main
{
width: 60%;
margin: 10px auto;
border: solid 1px #333;
background-color: #fff
}
#header
{
padding: .5em;
background-color: #fff
}
#sidebar
{
float: left;
width: 100px
}
#content
{
padding: 20px;
border-left: dotted 1px #ccc;
margin-left: 140px
}
#footer
{
padding: .5em;
border-top: solid 1px #ccc
}
-->
</style>
</head>
<body>
<div id="main">
<div id="header">
<h1>Header</h1>
</div>
<div id="sidebar">
<form action="login.php" action="post">
<p>Username: <input type="text" name="username" /></p>
<p>Password: <input type="password" name="password" /></p>
<p><input type="submit" value="Login"></p>
</form>
<ul>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
</div>
<div id="content">
This is the content
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
Why doesn't this automatically adjust the size of the div next to it? Am I better going for the position attribute here guys? Cheers |
|||||||