Not set css attributes to child elements. Jquery
I have div with a table inside. Inside the td elements of the table, I have text and some links that h开发者_Go百科ave 'actionLink' class assign.
Using JQuery, I change some attribute values to the td and p elements inside the parent div. All works fine, but that the attribute values for a links also change.
Is there a way to change this attributes without affecting the a elements.
This is what I have
JavaScript
$('.sectionContent').css("color", $('#ParagraphForegroundColor').val());
$('.sectionContent').css("background-color", $('#ParagraphBackgroundColor').val());
$('.sectionContent p, .sectionContent td').not(".addColumn").css("font-family", $('#ParagraphFontFamily').val());
$('.sectionContent p, .sectionContent td').not(".addColumn").css("font-size", $('#ParagraphFontSize').val());
$('.sectionContent p, .sectionContent td').not(".addColumn").css("font-style", $('#ParagraphFontStyle').val());
$('.sectionContent p, .sectionContent td').not(".addColumn").css("font-weight", $('#ParagraphFontWeight').val());
$('.sectionContent p, .sectionContent td').not(".addColumn").css("text-decoration", $('#ParagraphTextDecoration').val());
Actually, I think you simply need to define the class actionLink in css so that it doesn't inherit the properties of the TD that's containing it.
Something like
.actionLink{
font-family:vlaue;
font-size:vlaue;
font-weight:vlaue;
font-style:vlaue;
text-decoration:vlaue;
}
EDIT :
For Instance, this works fine:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script type="text/javascript">
$(function(){
$('.sectionContent').css("color", 'blue');
$('.sectionContent').css("background-color", 'red');
$('.sectionContent p, .sectionContent td').not(".addColumn").css("font-family", '"Times New Roman",Georgia,Serif');
$('.sectionContent p, .sectionContent td').not(".addColumn").css("font-size", '11pt');
$('.sectionContent p, .sectionContent td').not(".addColumn").css("font-style", 'normal');
$('.sectionContent p, .sectionContent td').not(".addColumn").css("font-weight", 'normal');
$('.sectionContent p, .sectionContent td').not(".addColumn").css("text-decoration", 'none');
});
</script>
<style>
.actionLink{
font-family:Arial;
font-size:6pt;
font-weight:bold;
font-style:normal;
text-decoration:underline;
background-color:white;
color:black;
}
</style>
</head>
<body>
<div class="sectionContent">
<table>
<tr>
<td>
Some Test
<a class='actionLink'>Action</a>
</td>
</tr>
</table>
<p>Some Content</p>
</div>
</body>
</html>
Update: Looking more closely at your selectors, the selectors you've shown don't match any a elements at all unless they have the class "sectionContent", in which case they're matched by your first two lines that apply to all elements with the "sectionContent" class. But the remaining five lines clearly select only p and td elements, and so won't have any (direct) effect on a elements at all.
They could have an indirect effect, of course. If the a elements are inheriting their font settings from the p or td they're in (and they frequently do), then of course changing the font settings on the p or td will affect the a indirectly because it's inheriting them. No way 'round that other than to explicitly set font settings on the a elements so they don't inherit anymore.
For example:
CSS:
p {
font-family: serif;
}
a.actionLink {
font-family: sans-serif;
}
HTML:
<p>This is the paragraph with <a href="#" class="actionLink">an 'actionLink' link in it</a>.
JavaScript:
$("p").css("font-weight", "bold");
Now the link is in bold, because it was inheriting its font-weight from its parent element. In contrast:
$("p").css("font-family", "Comic Sans"); // Hey, I had to do it
That has no effect on the a element, because it has its own font-family setting.
Original answer:
Hard to answer specifically without seeing your markup, but generally: You can set your selectors to only match elements that have the class and have a certain tag name, e.g.:
// Matches *all* elements with the class "className"
$(".className")
// Only matches `p` elements with "className"
$("p.className")
// Only matches `td` and `p` elements with "className"
$("p.className, td.className")
jQuery supports nearly the full range of CSS3 selectors, and then some. Details:
- jQuery Selectors
- CSS3 Selectors
- CSS2.1 Selectors (but the CSS3 stuff supercedes this)
加载中,请稍侯......
精彩评论