I'm new to JavaScript. I managed to add dynamic inputs after clicking on a button but I want to know how to apply the CSS to those added inputs, if anyone can give me a simple example i'd be glad!
Thank you!
Perhaps something like this:
<button onclick="newInput()">Add new input</button>
function newInput() {
var newElement = document.createElement("input");
newElement.className = "newClass";
document.body.appendChild(newElement);
}
And in the style section, or in the .css file, you'll have:
.newClass {
/*Styles go here*/
display: block;
}
Fiddle example of the above: http://jsfiddle.net/8zen9wwo/3/
Here is a very simple example using jQuery:
http://jsfiddle.net/kmrvpz99/
Html Code
<div class="container"></div>
Javascript Code
$('.container').append('<input type="text" class="yourstyle">');
var manualCss = $('<input type="text">').css('background-color', '#333');
$('.container').append(manualCss);
The css File
.yourstyle {
background-color: #000;
}
By defining .yourstyle in the css file, all elements on the html site that possess this class, even those dynamically added via javascript, will use this style. You can however manually modify the css by setting the style attribute on the element directly.
Related
What is the proper and fastest way to change CSS values using JavaScript?
For example, if I have a style.css file:
#h1 {
color: 'red';
}
I need to change the color to any other color and update the CSS file.
document.querySelector('#h1').style.color = 'your-color';
for multiple css property change use with classname add .it reduce the code lines in dom
document.querySelector('#h1').classList.add('your-class')
JS:
document.getElementById("elementsId").style.color= "red";
My recommendation would be not to use Id name like h1 as it may be confusing with the <h1> tag in html. Use more clear variable name like headerId.
for changing multiple css properties use this:
document.getElementById(elementsId).setAttribute("style","width: 500px; background-color: yellow;");
$('h1').css('color','#ff5722');
#h1 {
color: 'red';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1> this color tho</h1>
Jquery is from javascript so once you learn jquery you will sometimes go back to javascript
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>
Iam new to javascript, I have given style for a div by using javascript in one js file and i want to get that style from another js file. how it is possible??
when i used
var height= $("#searchComment").css("height");
and on alerting the result it is get like 'undefined'.
if this style is given in html it returns correctly.
test1.js and test2.js are included in index.html
In test1.js ihave given styling to a div of id 'searchComment'
$( "#parentDiv").append("<div class='ui-li-desc' id='searchComment' style='height:50px; width:40 px'></div>");
and in another js file test2.js i want to get the style of div of id 'searchComment'.
how can i get this style?? please help me.
Thank you
use jquery selector and then change css:
$('.number').css({'font-size': '12px', 'text-align': 'left'});
You have to give ID for that div by using the id you can get it from other JS
Limitation :
Both js should be using in that HTML file.
Before using id of <div> you have to create that div
Ex :
test1.js
$("#commentList").append(<div class='number' id="mydiv" style='font-size: 18px;
text-align: justify; direction: rtl; float: right; width: 12%; padding-top:75px;'>
some Variable</div>);
test2.js
document.getElementById("mydiv").style;
You can change of any elements style from any file, But the standard practice is to add class instead of changing style of an element. To add class you can use .addClass('new-class') jQuery function. And put all your style for new class in separate CSS file. And if you just want to add style anyway without caring about standard, then you can use .css jquery function.
$(".number").css({
'attribute1': value,
'attribute2': value,
});
i think you want the description of the css class use. refer the post
function getStyleRules(className) {
var class = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
for (var x = 0; x < class.length; x++) {
if (class[x].selectorText == className) {
(class[x].cssText) ? alert(class[x].cssText) : alert(classes[x].style.cssText);
}
}
}
getStyleRules('.YourClassName');
click here
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.
I am trying to use style attribute for JavaScript. But, apparently, I was doing something wrong with it. I am new in JavaScript so a general idea about style attribute for JavaScript would be great. I want to change the place, color and text-decoration etc. of JavaScript elements. I thought that declaring style attribute for div changeMe in HTML will be applied for the JavaScript. Because, JavaScript takes id of it. I wanted to use all of the style attributes that are in the div. Where am I missing? Here is my attempt to do it:
<div id="changeMe" style="position: absolute;text-decoration: none;
color: white;right:43%; top: 90px;">
<a href="home.php" >Go to homepage</a>
</div>
Javascript:
var testElement = document.getElementById("changeMe");
var text = "aaa".document.getElementById("changeMe");
text.style.textDecoration = "none"; //I changed style here too because first did not
//work.
check.onfocus= function()
{
testElement.innerHTML = text.link("index.php");;
}
Please help me understand the structure.I am stuck.Thanks
Your JavaScript will error here:
var text = "aaa".document.getElementById("changeMe");
…since "aaa" is a string and strings do not have a document property. The rest of the script won't execute.
If you fixed that line, then:
text.style.textDecoration = "none";
… would have no effect. The text-decoration is part of the link's style, not the div's.
You need to style the <a> element. If you really want to get to it via JS then you can:
testElement.getElementsByTagName('a')[0]
But you would probably be better off just using a stylesheet:
#changeMe a { text-decoration: none; }
But make sure you do something else to make it clear that the piece of non-underlined text is a link.
You're trying to style the div but you need to apply your text-decoration and color styles to the a tag itself for it to take effect.
All of this can easily be done with cascading style sheets instead, by the way.
document.getElementById("changeMe").firstChild.style.textDecoration = "none";
Working Example: http://jsfiddle.net/8Evyq/
Something definitely fishy here.
var text = "aaa".document.getElementById("changeMe");
// Without those "aaa"
var text = document.getElementById("changeMe");
// To change the <a> style inside the 'changeMe' <div>
var alinks = text.getElementsByTagName("a");
for (var i=0; i<alinks.length; i++) {
alinks[i].style.textDecoration = "none";
}
Here it is in action.