<div id="newsinsite" >gasdgasdgf</div>
<div id="newsinsite" >hasdgfasd</div>
<div id="newsinsite" >gasdgasd</div>
<div id="newsinsite" >gasdgasd</div>
<script>
document.getElementById('style').style.width = "430px";
</script>
Javascript is give a set style for all div with newsinsite. Please help me :)
Do this:
<div id="newsinsite1" class="newsinsite">gasdgasdgf</div>
<div id="newsinsite2" class="newsinsite">gasdgasdgf</div>
<div id="newsinsite3" class="newsinsite">gasdgasdgf</div>
<div id="newsinsite4" class="newsinsite">gasdgasdgf</div>
<script>
var elem = document.getElementsByClassName("newsinsite");
for (var i=0;i<elem.length;i++) {
elem[i].style.width = "430px";
}
</script>
But if this is a static setting use css instead:
<style>
.newsinsite {
width: "430px";
}
</style>
UPDATE
For IE8 support, use querySelectorAll('.classname') instead of getElementsByClassName
<div class="newsinsite">gasdgasdgf</div>
<div class="newsinsite">hasdgfasd</div>
<div class="newsinsite">gasdgasd</div>
<div class="newsinsite">gasdgasd</div>
<script>
var i = 0, els = document.getElementsByClassName('newsinsite'), len = els.length;
for(;i<len;i++) {
els[i].style.width = '430px';
}
</script>
Or, set it with CSS:
.newsinsite {
width: 430px;
}
Related
I'm a beginner in javascript with HTML and CSS. I want to try is there a way to access child container class via parent container class. or can I add a new class("second_new") to "second" class via "first" class.
/* CSS */
.first {
background-color: red;
}
.first_new {
background-color: pink;
}
.second {
background-color: blue;
}
.second_new {
background-color: purple;
}
<!-- HTML -->
<div class="row">
<div class="first">
<h1>This is first class</h1>
<div class="second"> <!-- I want to change this -->
<h2>This is Second class</h2>
</div>
</div>
<div class="first">
<h1>This is first class</h1>
<div class="second"> <!-- I want to change this -->
<h2>This is Second class</h2>
</div>
</div>
</div>
<!-- JAVASCRIPT -->
<script>
var firstClass = document.getElementsByClassName("first");
function Mousein() {
this.classList.add("first_new");
};
function Mouseout() {
this.classList.remove("first_new");
};
for (var i = 0; i < firstClass.length; i++) {
firstClass[i].addEventListener('mouseover', Mousein);
firstClass[i].addEventListener('mouseout', Mouseout);
}
</script>
yes you can
Method 1
document.querySelector('.first .second');
Medthod 2
let parent = document.querySelector('.first');
parent.querySelector('.second');
Thanks Guys I found the answer this
/* CSS */
.first {
background-color: red;
}
.first_new {
background-color: pink;
}
.second {
background-color: blue;
}
.second_new {
background-color: purple;
}
<!-- HTML -->
<div class="row">
<div class="first">
<h1>This is first class</h1>
<div class="second"> <!-- I want to change this -->
<h2>This is Second class</h2>
</div>
</div>
<div class="first">
<h1>This is first class</h1>
<div class="second"> <!-- I want to change this -->
<h2>This is Second class</h2>
</div>
</div>
</div>
<!-- JAVASCRIPT -->
<script>
var firstClass = document.getElementsByClassName("first");
var child;
function Mousein() {
this.classList.add("first_new");
child = this.querySelector(".second");
child.classList.add("second_new")
};
function Mouseout() {
this.classList.remove("first_new");
child.classList.remove("second_new")
};
for (var i = 0; i < firstClass.length; i++) {
firstClass[i].addEventListener('mouseover', Mousein);
firstClass[i].addEventListener('mouseout', Mouseout);
}
</script>
Yes you can access bey selector. document.querySelector('parent child') . In your case would be: const childEl = document.querySelector('.first .second');
You can use getElementsByTagName() on any type of element.
This would be
var parents = document.getElementsByClassName('parent');
var child = [];
for (let i = 0; i < parents.length; i++) {
var child = parents.getElementsByTagName('div')[0];
children.push(child);
}
Or, Even Simpler:
var parents = document.querySelectorAll('.parent');
var children = document.querySelectorAll('.parent > div');
Note: Elements selected by querySelectorAll() are like arrays and array methods can be applied.
Note: To select one element use querySelector() method.
Hi I am doing a vanilla JS practice and I ran into some trouble with the function which i don't know why. The editor kept saying "can't read property of undefined" but i am using the correct selectors and methods so i don't get what's wrong. Here'ss the code
js:
function opena(){
var eleme= document.getElementsByClassName(".left")[0]
var elemo = document.getElementsByClassName(".right")[0]
eleme.classList.add("applejuice");
elemo.classList.add("pearjuice")
}
HTML:
<body>
<button onClick="opena()">press</button>
<div class="pack">
<div class="left" >A</div>
<div class ="right">B</div>
</div>
</body>
Since you are using document.getElementsByClassName(), you do not need to put . before each classname like .left or .right. You can use is directly like:
document.getElementsByClassName("left")
document.getElementsByClassName("right")
function opena() {
var eleme = document.getElementsByClassName("left")[0]
var elemo = document.getElementsByClassName("right")[0]
eleme.classList.add("applejuice");
elemo.classList.add("pearjuice")
}
.applejuice { color: red; }
.pearjuice { color: orange; }
<body>
<button onClick="opena()">press</button>
<div class="pack">
<div class="left">A</div>
<div class="right">B</div>
</div>
</body>
On a side note, . before the class name would have been required if you were using document.querySelector() or document.querySelectorAll() like:
function opena() {
var eleme = document.querySelectorAll(".left")[0]
var elemo = document.querySelectorAll(".right")[0]
eleme.classList.add("applejuice");
elemo.classList.add("pearjuice")
}
.applejuice { color: red; }
.pearjuice { color: orange; }
<body>
<button onClick="opena()">press</button>
<div class="pack">
<div class="left">A</div>
<div class="right">B</div>
</div>
</body>
You only need to pass in the class name you want to get.
var eleme= document.getElementsByClassName("left")[0]
var elemo = document.getElementsByClassName("right")[0]
I want have a list of items in which the color of a selected element turns red when it is selected and all of the other divs turn blue. How can I identify the selected div that would then turn red?
$(document).ready(function() {
$('#table_1 .tableRow div').click(function(event) {
//Set the style for all divs
var myElements = document.querySelectorAll("#table_1 .tableRow div");
for (var i = 0; i < myElements.length; i++) {
myElements[i].className = "blueText";
}
//Set the style for tyhe selected div
//selectedItem.className="selectedText";
});
});
.selectedText {
color: red;
}
.blueText {
color: blue;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="table_1" class="table">
<div class="tableRow">
<div>
Line 1
</div>
<div>
Line 2
</div>
<div>
Line 3
</div>
</div>
</div>
</body>
</html>
It's enough to change:
//selectedItem.className="selectedText";
to:
event.target.className="selectedText";
The snippet:
$(document).ready(function(){
$('#table_1 .tableRow div').click(function(event) {
//Set the style for all divs
var myElements = document.querySelectorAll("#table_1 .tableRow div");
for (var i = 0; i < myElements.length; i++) {
myElements[i].className="blueText";
}
//Set the style for tyhe selected div
event.target.className="selectedText";
});
});
.selectedText {
color: red;
}
.blueText {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="table_1" class="table">
<div class="tableRow">
<div>
Line 1
</div>
<div >
Line 2
</div>
<div >
Line 3
</div>
</div>
</div>
You can do it with this:
$('#table_1 .tableRow div').click(function() {
$(this).removeClass().addClass('selectedText').siblings().removeClass().addClass('blueText')
})
.selectedText {
color: red;
}
.blueText {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="table_1" class="table">
<div class="tableRow">
<div>
Line 1
</div>
<div>
Line 2
</div>
<div>
Line 3
</div>
</div>
</div>
Pure CSS solution using tabindex and :focus Selector for DIV's.
div:focus {
color: red;
}
div {
color: blue;
}
<div id="table_1" class="table">
<div class="tableRow">
<div tabindex="1">Line 1</div>
<div tabindex="2">Line 2</div>
<div tabindex="3">Line 3</div>
</div>
</div>
You can use the $(this) object to reference the element on which a jQuery handler was made:
$(document).ready(function(){
$('#table_1 .tableRow div').click(function(event) {
//Set the style for all divs
var myElements = document.querySelectorAll("#table_1 .tableRow div");
for (var i = 0; i < myElements.length; i++) {
myElements[i].className="blueText";
}
$(this).addClass('selectedText')
});
});
Also, if you want to use something other than just the CSS class to determine if an element is selected or not (outside of the jQuery callback), you could add a data-* attribute to it 1.
My HTML
<body>
<div id="finalparent">
<!--many parent divs here-->
<div id="1stparent">
<div id="txt_blog_editor" class="box" style="width: 1097px;">
<div class="abc anotherclass">
</div>
</div>
</div>
</div>
<div class="abc"></div>
</body>
My Script
$('html').on('mouseover','.fr-bttn .fa-picture-o', function () {
var pos = $(this).offset();
console.log(pos.left+"||"+pos.top);
var left_pos=(pos.left-15)+"px";
var top_pos=(pos.top+35)+"px";
$(".abc").css({position: "absolute", top: top_pos, left: left_pos });
$(".abc").show();
$(".popup").show();
});
});
I want to apply the left and top to abc class which is without parent and not to the class which is under id="txt_blog_editor"
According to this answer here is a working snippet:
jQuery.expr[':'].noparents = function(a,i,m){
return jQuery(a).parents(m[3]).length < 1;
};
var elts = $(".abc").filter(":noparents(#txt_blog_editor)");
elts.css({ "background-color": "green" });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="finalparent">
<!--many parent divs here-->
<div id="1stparent">
<div id="txt_blog_editor" class="box" style="width: 1097px;">
<div class="abc anotherclass">
ABC With Parent
</div>
</div>
</div>
</div>
<div class="abc">ABC WITHOUT Parent</div>
Basically, you create a new jQuery expression :noparents which returns elements not having selector given parents
You need to check if .abc has a parent #txt_blog_editor http://jsfiddle.net/ugv2pxdw/4/
$('html').on('mouseover','.fr-bttn .fa-picture-o', function () {
var pos = $(this).offset();
console.log(pos.left+"||"+pos.top);
var left_pos=(pos.left-15)+"px";
var top_pos=(pos.top+35)+"px";
$('.abc').each(function(){
if (!$(this).parents('#txt_blog_editor').length) {
$(this).css({position: "absolute",top: top_pos, left: left_pos });
$(this).show();
$(".popup").show();
}
});
});
If abc classes are only direct childs of body, why not using body > .abc as your selector?
I am attempting to toggle the height of all elements with class name on button click.
Here is what I am currently using. Right now it will work onClick the first time, but wont change back on second click. When I change if statement to something NOT true, the function still fires.
<head>
<script type="text/javascript">
function changeHeight() {
var elems = document.getElementsByClassName('div1');
for(var i = 0; i < elems.length; i++)
{
if (elems[i].style.height = '25px'){
elems[i].style.height = '110px';
}
else {
elems[i].style.height = '25px';
document.getElementById("expand").innerHTML="[+]";
}
</script>
<style type="text/css">
.div1 {
overflow:hidden;
height:25px;
}
</script>
</head>
<body>
<button type="button" id="expand" onClick="changeHeight();">[+]</button>
<div class="div1">
content
</div>
<div class="div1">
content
</div>
</body>
I believe the issue is I can not get my 'else' to fire because my if is not firing properly.
Any ideas?
Thanks
-Trevor
your if condition check is wrong, you need to use equality operator (==) and not assignment operator ( = ) in condition check, so change:
if (elems[i].style.height = '25px'){
..
to
if (elems[i].style.height == '25px'){ //use == not =
..
and yes the closing tag } of for loop is also missing, do:
for(var i = 0; i < elems.length; i++) {
if (elems[i].style.height == '25px'){
elems[i].style.height = '110px';
}
else {
elems[i].style.height = '25px';
document.getElementById("expand").innerHTML="[+]";
}
}
Use descendant selector for this kind of task. It's much easier.
http://jsfiddle.net/h7vGj/2/
<head>
<style type="text/css">
.div1 {
overflow:hidden;
height:25px;
}
.on .div1 {
height: 110px;
}
</style>
<script>
function foo(ele) {
if ( !ele.state ) {
document.body.className = "on";
ele.state = true;
}
else {
document.body.className = "";
ele.state = false;
}
};
</script>
</head>
<body>
<button type="button" id="expand" onclick="foo(this);">[+]</button>
<div class="div1">
content
</div>
<div class="div1">
content
</div>
</body>
PS. Your style tag is closed by script tag.