Develop Reference

How to use Javascript to add multiple style properties to one element?

I've tried various renditions of this code to try and change a certain element for a coding exercise but non of them seems to be able to change multiple styling properties of an element on a button click. Would love some assistance. Thanks!
document.getElementById("Combo Style").onclick = function() {
document.getElementById ("More Text").style.fontSize.color = "50px , #BB65C5";
}

You can use cssText property but it will change the styling for the element completely
Style cssText Property
document.getElementById("myP").style.cssText = "background-color:pink;font-size:55px;border:2px dashed green;color:white;"
This will overwrite the existing css styling for that element , so make sure you included every needed property.

To achieve your expected result use setAttribute
HTML:
<button id="Combo Style">Change</button>
<div id="More Text">abcd</div>
JS:
document.getElementById("Combo Style").onclick = function() {
document.getElementById("More Text").setAttribute("style", "font-size:50px;color:red;");
}
http://codepen.io/nagasai/pen/AXVWwO

You need to grab the element by using id or any selector and use style property or css text property to apply css. Check the below code -
var element=document.getElementById("More Text");
element.style.fontSize="20px";
element.style.color="red";
element.style.background="blue";
You can also use cssText property, like -
document.getElementById("More Text").style.cssText='fontSize="20px";color="red";'
This will insert an inline style tag in the element with the csstext property.

How to style the active element using javascript [duplicate]

This question already has answers here:
Setting CSS pseudo-class rules from JavaScript
(12 answers)
Closed 6 years ago.
I can use CSS to style an element so that it changes appearance when active. For instance:
.test:active {
background-color: yellow;
}
But how do I do this in javascript if I want to apply it to a specific element, not by class? I can set the background color for the default state using:
document.getElementById("myid").style.backgroundColor = "yellow"
But I can't do this:
document.getElementById("myid").style.active.backgroundColor = "yellow"
I don't want the javascript to respond to the element being active or not - I want to do a static initialization in javascript that then makes a specific element have a different color when it is active.
If the element was guaranteed to have an id I could use javascript to append a style sheet rule which used the #id selector, but I don't have this guarantee. All I can be sure of is I will get a reference to an element and I need to style it so that it has a different color when active.

You could use event listeners with the specific element.
When defining element, try this. You can of course make it a button or whatever:
<!-- in this case, using 'this' will refer to the element at hand. this way the element is targeted even if it has no ID or class -->
<input onfocus="elemFocused(this)" onblur="elemBlurred(this)">
This makes it so that when you focus the element (make it active), it runs the focused function. When it blurs (you select a different input or something), it runs the blurred function. In javascript:
function elemFocused(element){
element.style.backgroundColor = 'yellow'; // sets BG color to yellow
}
function elemBlurred(element){
element.style.backgroundColor = 'initial';// sets BG color to default; you can change if needed
}

I'm not certain that you have programatic access to the ':active' style directly, but you do have access to the active event so you can replicate it with something like this:
In your CSS add a css class to handle your active state, something like:
.active{
background-color: red;
}
Then just add the class on that event:
document.getElementById("myid").onfocus = function(){
this.className += "active";
};
document.getElementById("myid").onblur = function(){
this.className = "/*replace this with the original classes*/";
};

How to check if element is not visible due to parent is hidden thanks its class

I have an array of checkboxes and want to switch them (check/uncheck) as a group, but only these which are really visible.
<style id=dynamicStyle>DIV.filterLevel3{display:none;}</style>
<div class="filterLevel3">
<input type=checkbox id=cbx_123456 name=cbx_123456 class=cbxForSwitch>
... more elements belonging to the checkbox,
... always hidden on shown together
</div>
The dynamicStyle.innerHTML may be changed by another javascript. Changing the visibility works fine, but I need to select all checkboxes of class "cbxForSwitch" that are currently visible.
I have seen many examples using jQuery, but all of them were inspecting css attributes of said element or his style etc. I need to get actual visibility after the explorer have implemented all rules of style including inheritance.

Using jQuery you can get the parent element's css attributes by using the parent() function. If the parent's 'display' css property is set to none, you can then check the box by using the jquery function prop().
$('input[type=checkbox]').each(function() {
if ($(this).parent().css('display') !== 'none') {
$(this).prop('checked', true);
}
});
Here is a JSFiddle

alter divs css with javascript

Can I change style of some div link. Here is what I mean
<div id="somediv">something/div>
Lets say I have css like this :
#somediv a{
color:#000;
}
Now for instance upon some action such as mouse click on any element I want to change somediv a link css to
#somediv a{
color:#00ffff;
}
I know how to select div, by using Document.get.elementById('somediv') Is it possible to select a by using above method or any other?
Thank you
DETAILS: Yes I know how to select it using jquery, or prototype .. I can't use any of those..

If you just want to apply a style to a particular element, it's very easy to do:
document.getElementById('whatever').style.color = '#f0f';
If you actually want to apply cascading styles (eg: #someDiv a), then it's not so easy (though it is definitely possible). I would suggest applying a new class to something, and having a pre-existing rule in your CSS.
CSS:
#someDiv a {
color: #000;
}
#someDiv.awesome a {
color: #f0f;
}
Javascript:
document.getElementById('someDiv').className = "awesome";

Yep, you can modify the actual CSS rules at runtime. See Totally Pwn CSS with Javascript for more details.
If you're using jQuery or YUI, there's some good info in question 1079237

document.getElementById ( 'somediv' ).children[0].style.color = 'new color';
assuming the A tag will be the first element inside your DIV

You could use CSS behaviors for this:
For instance:
#somediv a:hover
{
color:#0ff;
}
Otherwise, you may create a dedicated class (used when an element is click for example):
#onclickclass
{
color:#0ff;
}
Then in JavaScript, on onClick event, do:
document.getElementById('somediv').className = 'onclickclass';

And to change the style use
document.getElementById('somediv').className = 'your-css-class';

If you really want to select the anchor you would have to then traverse the document.getElementById('somediv').children array.
As others have suggested though the simpler answer would be to set the className attribute on your div and let the CSS style cascade onto the anchor tag.

How to change css properties of html elements using javascript or jquery

How can I change CSS from javascript.
I'm using jQuery-ui Dialog and I want to change the style of a DIV from javascript.
Thanks

Check out the jQuery documentation. If you want anything it will be there.
Anyhow, if you want to add styles to elements, you need to use the css function, which has a few variants.
$(selector).css(properties); // option 1
$(selector).css(name, value); // option 2
So if you have a DIV with ID of "mydiv" and you want to make the background red, you would do
$("div#mydiv").css({'background-color' : 'red'}); // option 1
$("div#mydiv").css('background-color','red'); // option 2
The first way is easier if you're setting multiple things at once.
If you want to check what a property is currently set to, you would use a variant of the 2nd option, just omit the value.
var color = $("div#mydiv").css('background-color');
Would make the var color be red if you already set it above, for example.
You can also add and remove classes, doing something like
$(selector).addClass(class_name);
$(selector).removeClass(class_name);

This answer works even without jQuery.
So you have something like this:
<style type="text/css">
.foo { color: Red; }
.bar { color: Blue; }
</style>
<div class="foo" id="redtext"> some red text here </div>
If you wish to change just some attributes, you can always find the element using
var div = document.getElementById('redtext');
function and then change the attached color style by
div.style.color = 'Green';
Making your red text appear in green instead.
If you want to change the class defined for the div to another style class, you can do:
div.className = 'bar';
making the div now use class bar, which makes your previously green text blue.

There are a couple of ways to manipulate elements styles using the jQuery framework. Take a look through the documentation related to CSS and changing attributes:
http://docs.jquery.com/Attributes/addClass#class
http://docs.jquery.com/CSS

Try this.This is jquery code.
$("myDiv").css({"color":"red","display":"block"})
If you are using vanila javacript,try this.
var myDiv = document,getElementById("myDiv");
myDiv.style.display = "block";
myDiv.style.color = "red";