How to programmatically get a Control's CSS values - asp.net

I am setting styles like so:
button2.Style.Add("color", "#eee");
How do I now check what the color value of that control is?
if (button2.Style["color"] == "#eee") doesn't work.

Have a look at jquery which has a .css method that can both set and query css values.
Have look at this page

Related

set value of css variable condition wise

I am trying to change value of CSS variable based on another variable. I want to check if current value of variable is white then set it to black...
In some class suppose my variable is --default-var, value of --default-var can be any color....
If value of default-var is white then change it to black
i tried
.my-class{
#if var(--default-var) == #fff{
--default-var : #000;
}
}
I have also tried
.my-class{
#if --default-var == #fff{
--default-var : #000;
}
}
both cases are not working..please help.
Best practice here is to create two classes with the different CSS values and then toggle the class using logic such as in C# Razor or Javascript. This keeps it cleaner to read.
You can not use this kind of Logic in CSS. There are workarounds though.
Use a Preprocessor
You could use either SASS or Less to create CSS-Files that are created conditionally based on variables that you can set yourself. This however only helps if you´re decision is made on build-time. So this will not help you if you want to react to user input.
This is not entirely true, as there are some pseudo selectors that in the end can change styles based on user input. However, you can not use them to react to variables set in your CSS.
Use Javascript
With Javascript you can manipulate elements and their style-Property or their class-List directly. In order to control under what condition you want these changes to be made you can use all the tools that you have in Javascript.
You could read what value your css variable has and then change styles on other classes based on that value.
Just Google for js DOM manipulation or setting css with js. In order to provide better ressources i´d need some more information on what exactly you want to do. This may be what you are looking for: https://stackoverflow.com/a/51860936/11930769.

How to apply css on the below code lines

var next_text=item.text().sub str(item.text().index Of("")+0,item.text().index Of("")+9);})
I wanted apply css property display none on the value next_text.How can i achieve that?
There must be Jquery object, On variable you can not apply css. Refer: http://www.w3schools.com/jquery/jquery_css.asp

Override twitter-bootstrap css

I'm using a button with bootstrap, something like:
I want to disable the style change when the button is hovered or click. I figured I could do this by overriding btn-default:focus or btn:focus but I also have other <a> tags styled as buttons that I would like to keep the effects of click or focus. Is there a way that I could just override the standard bootstrap css in just this case?
add an id to this particular
then add this css
#overrideBS:focus {
//whatever unique properties you want
}
Add your own class myclass, then set myclass:focus with whatever changes your need adding !important at the end of the overridden value.

change the color of textbox on pageload

Is there any way to change the color of the textbox which is defined as required in model. The color should appear when the page load not when the submit button is hit and anything fails.
I need this without assigning any extra class or id in the view. Is there any such property?
Thanks in advance.
you should put this rule on your css file :
input[type=text][data-val-required]{color:red /* or any other color */}
Note: IE7 and IE8 support attribute selectors only if a !DOCTYPE is specified
for more info https://developer.mozilla.org/en-US/docs/CSS/Attribute_selectors

ASP.NET control with visible=false cannot be used in javascript?

I have an ASP.NET text control "FromDate" whose visible property is set to false, but I wanted a client side javascript to be able to toggle the visibility property using CSS properties
element1.style.display = "none"; // hides the element
element1.style.display = ""; // shows the element
but when I attempt to get the textbox, I get null on
var element1 = document.getElementById("FromDate");
When I try the same code with visble=true as the default on the "FromDate" ASP.NET control, it works (although that is not the behavior I need)
Any ideas?
When you set Visible = false to a control, it is not rendered. That means there is no HTML representation of that control sent to the page. Set the style only.
You can set the style as display: none from server side code like this:
FromDate.Style.Add(HtmlTextWriterStyle.Display, "none")
If you want to hide this control, you can try CSS like this:
<asp:somecontrol id="FromDate" style="display:none" />
I think hiding the control with CSS is easier to understand.
Instead of setting Visible=false, set its style.display to none, that way the element is still there for JavaScript to manipulate.

Resources