没有在ASP.NET代码中动态设置CSS样式

Question

I'm trying to change the CSS class and attributes of a set of asp.net controls via the code behind using this:

ASP.NET:

<span id="followbtn_mainbtn" runat="server" class="follow-btner" onclick="profile_followers_follow(this)">

        <img id="img_followingbtn" runat="server" class="profile-single-profile-follow-btn-img" src="icons/profico/following.png" style="display: none;">
        <img id="img_unfollowbtn" runat="server" class="profile-single-profile-unfollow-btn-img" src="icons/profico/unfollow.png" style="display: none;">
        <img id="img_followicon" runat="server" class="profile-single-profile-follow-icon" src="icons/profico/followIcon.png">

        <span id="span_following_text" runat="server" class="profile-single-profile-follow-btn-following">Follow</span>
        <span id="span_unfollow_text" runat="server" class="profile-single-profile-follow-btn-unfollow" style="display: none;">Unfollow</span>

      </span>

Code:

followbtn_mainbtn.Attributes.CssStyle.Add("className", "follow-btner-no-hoverer");
span_unfollow_text.InnerText = "Following";
img_followingbtn.Attributes.CssStyle.Add("display", "block");
img_unfollowbtn.Attributes.CssStyle.Add("display", "block");
span_unfollow_text.Attributes.CssStyle.Add("display", "block");

However when I run this, I do not see the desired results. If I hard code the appropriate classes to the controls, they work properly but the code doesn't do it dynamically.

What am I doing wrong?

Answer 1

Are you updating the css during a postback? First try adding the changes to your Page_Load method on the form and that will tell you that your code is working when setting the styles and classes. If the code works then I would make sure you have EnableViewState="false" on your page and/or parent control of the span.

Answer 2

It was actually a simple error. I've used the wrong code to change the css class of the span named "followbtn_mainbtn".

I replaced this

followbtn_mainbtn.Attributes.CssStyle.Add("className", "follow-btner-no-hoverer");

with this

followbtn_mainbtn.Attributes["class"] = "follow-btner-no-hoverer";

Voila! Done deal. Thanks for all your answers and comments though :)

Answer 3

您可以使用此代码在后面的代码中更改CSS

 img_followingbtn.Style.Add("display", "block");