In angular, we can easily change the property of a CSS class dynamically, like if I have a class
.my-class {
background: url('..')
}
and if I used my-class as
<div class="my-class">
------
</div>
now, we can change the image effectively by using
[style.background]="url(..)"
like
<div class="my-class" [style.background]="getImageUrl()">
----
</div>
Now, can anyone tell me, is there any solutions if there's have multiple css-class and there I have to change background url all of them, how can I do it?
Like my CSS classes are
.my-class-one {
background: url('..')
}
.my-class-two {
background: url('..')
}
.my-class-three {
background: url('..')
}
and HTML code is
<div class="my-class-one my-class-two my-class-three">
----
</div>
There I need to change all background image URL by calling angular methods
getImageUrlOne()
getImageUrlTwo()
getImageUrlThree()
ngClass can be used in html
[ngClass]="{'my-class-one': getImageUrlOne(), 'my-class-two': false, 'my-class-three': false}"
JS
getImageUrlOne(){
//.... logic to decide my-class-one should be used or not
return true;
}
You can set different-different flag variable in each function and when function call then set one flag true. set ngclass as below:
<div [ngClass]="{'my-class-one': getImageUrlOne(), 'my-class-two': getImageUrlTwo(), 'my-class-three': getImageUrlThree()}">
Related
I want that the user is able to specify his favorite color. The whole page should then change to this specific color scheme.
My CSS is done with this as base:
:root {
--maincolor: black;
}
What would be the best way to change this variable inside my CSS dynamically on a button press or something like this?
PS: I would prefer to set this value only a single time and then be done with it
EDIT: Solution for me:
<script>
var color = "#Html.ViewData["Color"]";
document.body.style.setProperty('--maincolor', color);
</script>
Was enough to change --maincolor as i want. To set the color put this inside a controller:
ViewData["Color"] = "red"
Your best option, in my opinion, is to associate the user to a CSS class, not a color. Then, changing the class per user becomes trivial.
For example, you could store and retrieve this CSS class from your database or other persistence method. Then, upon retrieval, you could simply add the class to your element via Razor like so:
<div class="#UserColorClassName">
<p>
Any text you like here for User: #UserName
</p>
</div>
There are other variations of this method, as well. For example, you could create a database table of "UserCSSClasses" that would house class names and properties for different users.
Or, you could simply store the CSS hex-color and associate that with the user.
An example of this implementation would be as follows:
<div style="color: #(!string.IsNullOrEmpty(UserHexColor) ? UserHexColor : "")">
<p>
Any text you like here for User: #UserName
</p>
</div>
Edit: It sounds like you have a lot of changes to make on a per-User basis, not just one color. For this, I recommend the following solution:
Store the User/class association in the database or other persistence method as described above.
Instead of applying the class on elements inside of your view, apply it to the body element or that of a containing element.
This way, you can change as many classes as you want with CSS overrides:
body.User001 h1 {
color: red;
}
body.User001 p {
color: #c1c1c1;
}
body.User001 p span.caption {
color: red;
}
body.User002 h1 {
color: blue;
}
/* etc... */
I am trying to replace the class of a div with Javascript. I have looked at some posts but it did not seem to help (e.g. Change an element's class with JavaScript). I have a straightforward innerHTML
document.getElementById("colored-title").innerHTML = "Add comments";
HTML is straightforward as well and it works when there is no condition on the class
<div id="colored-title"></div>
I tried many options (I listed them all below) but none of them seems to work.
if (array[current][5] == 4) {
document.getElementById("colored-title").addClass("green-text");
document.getElementById("colored-title").className= "green-text";
document.getElementById("colored-title").className+= "green-text";
document.getElementById("colored-title").setAttribute=("class","green-text");
} else {
// other format
}
document.getElementById("colored-title").innerHTML = "Add comments";
You can add classname throught javascript by .classname='classname'
This should work.check your if condition to see why it is not working
window.onload = function() {
document.getElementById("colored-title").className= "green-text";
}
.green-text {
color: green;
}
<div id="colored-title">
hello
</div>
Hope it helps
If you have jQuery in your project, then setAttribute should look like this:
$("#colored-title").attr("class", "green-text");
You have to use the jQuery selector, not document.getElementById.
Edit: Worth noting, the .attr method can also set multiple things at once:
$("#thing").attr({class:"green-text", title:"green-Object", id:"green-Id"});
This statement will add the correct class to your div:
document.getElementById("colored-title").className= "green-text";
But with the following statement you are changing the class from "green-text" to "green-textgreen-text":
document.getElementById("colored-title").className+= "green-text";
If you have jQuery in your project, then
$("#elem").addClass("myClass");
.myClass {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="elem">
Text
</div>
I am probably going about this the wrong way, but is it possible to add styles from and external CSS file within a a reactjs component? I have tried to do it the conventional way however this does not seem to work, where you reference the class or id within the external css and do all your styling there.
var ProfilePanel = React.createClass({
render: function() {
return (
<div>
<p class="profile-text">{this.props.text}{this.props.children}</p>
</div>
);
}
});
and within my CSS I have:
.profile-text{
font-size: 10px;
}
You're using class which is reserved by js. You need to use className and should work.
Read more
I am working on complicated animation, I am trying to add effects by adding another class based on the val I am getting.
I have different css classes, and I wanna know how to dynamically add them this way.
.. Class="box bottom right"
when I add new class (eg: red).
It should be in my code this way:
.. Class="box bottom right red"
I am trying to change the css based on value I am calculating.
var els=2;
function changeColor(els) {
if (els>0) {
$("box bottom right").addClass("red");
} else{
$("box bottom right").addClass("green");
};
}
Here is code:
http://jsfiddle.net/BB6ED/1/
You need to use . to target elements by class as well as calling your function on page load:
var els=2;
function changeColor(els) {
if (els>0) {
$(".box.bottom.right").addClass("red");
} else{
$(".box.bottom.right").addClass("green");
};
}
changeColor(els);
Updated Fiddle
Directory Structure:
index.html
--admin
----suit.css
And the part of the css file is:
#suit-left{width:200px;right:240px;margin-left:-100%}
.suit-columns{padding-left:200px;padding-right:40px;}
I want to write a javascript code in the index.html:
<button onclick="">Change CSS</button>
to change the css file like this:
#suit-left { display: none; }
.suit-columns { padding-left: 0; }
How can I do this?regards,thanks a lot
If you want the apply css on particular element by javascript, do something like this.
<button onclick="changeCss()">Change CSS</button>
UPDATE
<script>
function changeCss(){
var suitInput = document.getElementById('suit-left');
suitInput.style.display = 'none';
//UPDATED the answer
var siteCol = document.getElementsByClassName('suit-columns')[0];
siteCol.style.paddingLeft = '0';
//siteCol.style.paddingRight = '0'; //incase of want padding right 0
}
</script>
What I would recommend here is to manipulate the classes associated with the element rather than changing the class definition itself.
Here is a simple example:
.sideBar{ /* your normal rules here */ }
.sideBar.hidden { display:none; }
In order to hide your sidebar, all you'd have to do is add the hidden class name to the element.
In this way, you would define CSS rules for your sidebar when it is open, and different rules for when it is closed. Once you have those two states pre-defined, all you'll have to do is change/add/remove the class to hide/display your sidebar.
I feel like this was the main issue with your question here. The other tasks you wish to perform such as clicking on a button or actually manipulating the class attribute has been covered in many posts already. Here are some useful links for you -
Add class to given element
Using an HTML button to call a JS function
You can write the script in this way and paste below script at head block of index.html
I assume that you have knowledge of jquery.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
function ChangeCss(){
$('#suit-left').css('display','none');
$('.suit-columns').css('padding-left','0');
}
<script>
<button onclick="ChangeCss();" >
Now it will help!
So basically using css function of jquery you can change css/style attributes.
I hope it will help you.