I want to select the p tag and style it within a content class div. Here is the example HTML:
<div class="content">
<p> this is paragraph </p>
</div>
I want to select and style the p which is immediately after the div. The p has no ID or class.
How can I select it via JavaScript?
This can be done using querySelector. You did not specify minimum browser requirement.
var p = document.querySelector(".content p");
p.style.color = "red";
http://jsfiddle.net/g35ec/
You can use querySelector
document.querySelector('.content p').style.color = 'red';
if you can get access to the div, you can use
var ps = divObject.getElementsByTagName('p'); //ps contains all of the p elements inside your div
var p = ps[0]; //take the first element
to style tag use it normally as you do
in the style tag or if you use a separate css file.
Have a look at this fiddle it might help you
http://jsfiddle.net/3uUjf/
p{
background-color: cyan;
}
Related
I want to see if there is a way to define the second div without defining an ID for the element or without using an attribute, and perform the append operation inside it, for example, to say that the p element should be appended inside the second div without using id And any other attribute, let's mention the second div.
More details are in the code *
function createEle() {
var c = document.createElement('p');
// In this section, I want to point to that div and use append without using an ID or any other attribute
return ?
}
createEle();
<section>
<div>
<div>I want the p tag to be appended in this div</div>
</div>
</section>
You can use a selector string instead, with only tag names. Eg section > div > div will select the nested div (it'll select a div which is a child of a div, which is a child of a section):
function createEle() {
const inner = document.querySelector('section > div > div');
inner.appendChild(document.createElement('p')).textContent = 'foo';
}
createEle();
<section>
<div>
<div>I want the p tag to be appended in this div</div>
</div>
</section>
<script>
Var x="....";
<\script>
<div id = x>
Some content
<\div>
As u can see in the above code I want to use the variable x as div's id but its not working.
Any suggestions plz...
You have to set the element’s id in your javascript code. See the code snippet below, the text apppears red because the javascript attaches the id red, stored in your variable x, to the div.
var x = 'red';
document.getElementsByTagName('div')[0].id = x;
#red {
color: red;
}
<div>Some content</div>
It is not impossible.
If you want to add id to elements dynamically, you should wait until document will be loaded. Then run script like:
var el = document.querySelector() // with some selector rule
// and set attribute 'id'
el.id = 'myId';
Perhaps you should tell what you want to do and find another way
HTML
<h1>Changing the Style</h1>
<p>JavaScript can change the style of an HTML element.</p>
<button type="button" onclick="openMe()">Open!</button>
<button type="button" onclick="closeMe()">Close!</button>
<p id="demo">Extra details...You can open and close this paragraph using the buttons above.</p>
CSS
.close {
display: none;
}
.open {
display: block;
}
button {
width:150px;
background-color: #00CCEE;
margin-left:15px;
font-size:120%;
}
#demo {
color:white;
background-color: #7F7F7F;
padding:10px;
font-size:120%
}
JAVASCRIPT
function closeMe(){
x=document.getElementById("demo");
x.className="close";
}
function openMe(){
x=document.getElementById("demo");
x.className="open";
}
Can I use Like x.IdName= "close"; In Javascript?
So far I know there are two ways to change style attributes using Javascript.
x = document.getElementById("demo");
directly eg.. (x.style.backgroundColor ="red";
by Class name eg.. (x.className="abc";)
for using class name we do use:
x = document.getElementById("demo");
x.className="abc";
My questions:
Can I use Id to change style attributes insted of useing className? if yes Please show.
Can I call "x" {x=document.getElementById("demo");} a variable?
There are three ways to modify the style of an element with JavaScript:
Modify the inline style. This is represented by the .style property on the element and the style attribute on the HTML tag.
Modify any feature of the element so that selectors on rulesets in the stylesheet start and or stop matching it. e.g. .foo { ... } would match elements that are members of the foo class, so if you modify the .className property to add or remove an element from that class, you will change the rules that apply to it. You can change other factors such as the id (not usually a logical idea), arbitrary attributes, or anything else that a selector exists for.
Modify the rulesets in the stylesheet itself.
You've already modified the style attribute of the element in your example.
x.style.backgroundColor= "red";
This is what modifying the style attribute is. The second example you edit the elements class name. I'm assuming what you mean is if you can apply styles to elements, using ids?
If that's the case, you can style elements by using the class selector which looks like this
.className {
/* Some styles */
}
Or with the id selector
#demo {
/* Other styles */
}
The two examples above either need to go into their own stylesheet, or inside the HTML in a <style></style> element.
document.getElementById selects element having certain ID. When You want to select elements by a classname, you can use i.e. document.querySelector('.your-class') to select nodes containing your-class className.
When You write
x = document.getElementById("demo");
x.style.backgroundColor ="red"
You are setting style using Id to select a node.
In the line x = document.getElementById("demo");x is the variable.
After running this line, the value of this variable is set to whatever function document.getElementById("demo"); returns. In this case, it's pointing to DOM element with Id attribute "demo".
I am trying to use html() function of jquery over the specific child like:
<div id="main">
<p>I am p tag</p>
<span> i am span tag</span>
</div>
Now if we use $("#main").html() it gives both p and span but if i want only p, what should i do?
Try like below,
$("#main p").html()
This will give me I am p tag but i want <p> I am p tag</p>
Try below for outerHTML,
$('#main p')[0].outerHTML
Or you can make it as jQuery function so you can chain.
jQuery.fn.outerHTML = function(s) {
var _this = this[0];
return _this.outerHTML?_this.outerHTML:(s ? this.before(s).remove() : jQuery("<p>").append(this.eq(0).clone()).html());
};
$('#main p').outerHTML()
DEMO: http://jsfiddle.net/skram/PMjKR/1/
Ref: Get selected element's outer HTML
Many ways depending on your exact requirements.
Standard css selector:
$('#main p').html();
filtering on children.
$('#main').children('p').html();
by getting the first child of main
$('#main:first-child').html();
EDIT
after seeing comment on another answer by OP i will simply add where html() is replace with [0].outerHTML
see selectors here
I have appended a textbox to a div area. However I want it to goto a new line in that div after it does that, so my for loop prints a column of textboxes instead of a row.
I tried this:
<div id="timearea"> </div>
var br = '<br/>';
br.appendTo("#timearea");
However this does not work. What would the code be?
You would need to create the element using the createElement() method then append the child to the element using the appendChild() method
var br = document.createElement("br");
document.getElementById("timearea").appendChild(br);
I suggest you apply CSS styling to your divs to control how they are laid out. You can add attributes to style inline or (preferably) add classes to assign styles via JavaScript.
The display attribute controls the flow - display:block should do it.
.my_block_class {
display:block;
}
You can then add the class with JavaScript like so:
document.getElementById("timearea").className += "my_block_class";
Or, if you want to do it without classes:
document.getElementById("timearea").style.display = "block";
Not sure if you mean textarea or input type="text" but regardless, it is better to do this in CSS. In your CSS file or inline style description add:
#timearea input {
display:block;
}
If it's an input element you are adding, or:
#timearea textarea {
display:block;
}
If it's a textarea.