1

I am currently changing styling from code behind by doing:

Div.Style["StyleAttribute"] = MyValue;

I want to change essentially only the a link tags color within the Div programatically is this possible?

The solution must not make use of HTML5.

The content is always dynamic, the links aren't static so using runat="server" is not possible.

Next step would be to see if I can change the active, hover and visited states.

Cœur
  • 37,241
  • 25
  • 195
  • 267
Anicho
  • 2,647
  • 11
  • 48
  • 76

5 Answers5

2

Jquery version:

$('a', $('#divId')).css('color', 'red')

JQuery docs:

gdoron
  • 147,333
  • 58
  • 291
  • 367
  • Nice, but since I am getting the values that will be set from code behind anyway makes sense setting it their. If there isn't a solution. I may implement this would need to pass values from code behind to jquery which should be doable. +1 for fast response. – Anicho Jan 26 '12 at 10:01
  • `$('a', $('.ContentRegion')).css('color', <%# Red %>);` I ended up doing this in code behind thanks to @gdoron – Anicho Jan 26 '12 at 11:32
2

If you choose this solution the page won't validate anymore, but it works across all browsers and does the job.

in your html you do:

<div class="StyledLinkWrapper">
    <style id="stylemylinks" runat="server"> </style>
    <a href="http://www.xyz.com">a Link</a>
</div>

and in the code behind simply:

 string colorNormal = "blue";
 string colorVisited = "red";
 string colorHover = "white";
 string bghover = "blue";
 StringBuilder style = new StringBuilder();
 style.AppendLine(".StyledLinkWrapper a {");
 style.AppendLine(String.Format(" color: {0};", colorNormal));
 style.AppendLine("}");
 style.AppendLine(".StyledLinkWrapper a:hover {");
 style.AppendLine(String.Format(" color: {0};", colorHover));
 style.AppendLine(String.Format(" background-color: {0};", bghover));
 style.AppendLine("}");
 style.AppendLine(".StyledLinkWrapper a:visited {");
 style.AppendLine(String.Format(" color: {0};", colorVisited));
 style.AppendLine("}");
 stylemylinks.InnerText = style.ToString();

and there you go. Just plain old Css, no fancy Javascript framework or whatever, and you are totally flexible in what you can do.

ramsesoriginal
  • 1,860
  • 1
  • 13
  • 16
  • great! If it would be more widely supported (or at least a bit supported), I would go for the `scoped`attribute on the style element.. see http://html5doctor.com/the-scoped-attribute/ But at the moment it's pointless... Except if oyu want to use https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin – ramsesoriginal Jan 26 '12 at 11:17
1

Try using data-attributes:

Div.Attributes.Add("data-link-color", "red");

jQuery:

$("#divID a").css("color", $("#divID").data("link-color"));

And you'll probably be able to use something similar for hover etc.

Andreas Eriksson
  • 8,979
  • 8
  • 47
  • 65
  • `data-attributes` would be a nicety but I have to support browsers not supporting HTML5. – Anicho Jan 26 '12 at 10:10
  • 1
    While older versions of IE will not recognize the data-attributes, they won't break anything, and jQuery will indeed recognize them. (Simply by fetching all attributes beginning with "data-"), so it shouldn't be a problem. Further reading: http://stackoverflow.com/questions/2412947/do-html5-custom-data-attributes-work-in-ie-6 – Andreas Eriksson Jan 26 '12 at 10:18
  • 1
    Naturally they would - anything else would defeat the whole purpose. Whilst older browser won't know what to do with data-attributes, or implement any HTML5-specific functionality, all data in them can be accessed with JavaScript, at least as far back as IE6. – Andreas Eriksson Jan 26 '12 at 13:32
1

use javascript/jquery

$("a:active").css("color", "red"); 
$("a:hover").css("color", "red");
marko
  • 10,684
  • 17
  • 71
  • 92
0

Try this once

in html 

<div runat="server" id="divControl">...</div>

in .cs file

protected System.Web.UI.HtmlControls.HtmlGenericControl divControl;
divControl.Styles.Add("height", number / anotherNumer);

you can apply styles.

hope this helps !!!

Madhu Beela
  • 2,205
  • 16
  • 16