Is there a way to do the following in JavaScript?
get a div by a class name,
get the iframe inside the div
and add an attribute (frameborder = 0)
<html>
<body>
<div class="calendar">
<iframe></iframe>
</div>
</body>
</html>
To get a div by class name:
var allDivs = document.getElementsByClassName("calendar");
Assuming there's only one
var calendarDiv = document.getElementsByClassName("calendar")[0];
Get the iFrame inside:
var iFrame = calendarDiv.getElementsByTagName("iframe")[0];
set an attribute:
iFrame.setAttribute("frameborder", "0");
Or, since getElementsByClassName isn't supported in old versions of IE, consider setting the id on the iFrame and simply doing:
document.getElementById("iFrameId").setAttribute("frameborder", "0");
First of all, you need to give your iframe id.
After that, you can get your iframe with the function document.getElementById(""), and than to change it's property.
For example:
<html>
<body>
<div class="calendar">
<iframe id="myIframe"></iframe>
</div>
<script type="text/javascript">
document.getElementById("myIframe").frameborder = 1;
</script>
</body>
</html>
Related
I have a paragraph tag with a class of "price" which I want to add a span tag inside using either Javascript, Jquery or both.
E.g
BEFORE: <p class="price"></p>
AFTER: <p class="price"><span class="whatever">Sale</span></p>
How can I achieve this?
You can do as follows:
$("p.price").append($(`<span class="whatever">Sale</span>`));
This is plain JavaScript code
function addSpan() {
var price = document.getElementsByClassName('price')[0];
var span = document.createElement('span');
span.classList.add('whatever');
span.innerText = 'Sale';
price.appendChild(span);
}
addSpan();
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p class="price"></p>
</body>
</html>
You can make the method more generic by passing parameters as well.
To add it within the first .price element, without jQuery:
document.querySelector(".price").insertAdjacentHTML(
"beforeend",
"<span class='whatever'></span>"
);
With jQuery:
$(".price").first().append("<span class='whatever'></span>");
If you know there's only one, you can leave out .first().
if need vanilla javascript:
var lcs_els = document.getElementsByClassName('price');
for(var key in lcs_els){
lcs_els[key].innerHTML = '<span class="whatever">Sale</span>';
}
<p class="price"></p>
if need jquery:
$('.price').html('<span class="whatever">Sale</span>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="price"></p>
Jquery variant 2 if need manipulate of span:
var span = $('<span/>').attr('class', 'whatever').html('Sale');
$('.price').append(span);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="price"></p>
Through the following html and js code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var get = $(".parent").html();
// Now I want to add some properties to div with "hello-world-2" class in html code of get variable
</script>
</head>
<body>
<div class="parent">
<div class="hello-world">
<div class="hello-world-2">
<h1 class="hello-world-3" style="padding-top:10px;">simple</h1>
</div>
<div class="hello-world-4">
</div>
</div>
</div>
</body>
</html>
Here I want to add some properties such as id to the div or adding another div inside the div with class "hello-world-2" or add some cutom tags such as
h1 tag, img tag etc
Now I have the code of div inside html in "get" variable I want to add an id to div with "hello-world-2" class not to original code but to the hmtl code in get variable is it possible ? thanks
This should work:
var e1 = document.getElementById('someId').id = 'otherId';
var e2document.getElementsByClassName('hello-world-2')[0].id = 'someId';
var newElement = document.createElement('div');
newElement.id = 'someId';
newElement.classList.add('someClass');
newElement.setAttribute('custom-attr', 'ca');
var newElement2 = document.createElement('h1');
newElement2.innerHTML = 'HEADER';
e1.appendChild(newElement);
e2.appendChild(newElement2);
I want erase a inline CSS <style> element in a <div> element. This <style> element is output from a JavaScript file.
This is the document:
<div id="rmid" class="rm">
<script type="text/javascript" src="http://domain.com/file.js"></script>
</div>
Loading this JavaScript file creates additional elements (editor's note: presumably via document.write()) , resulting in HTML markup like the following example:
<div id="rmid" class="rm">
<script type="text/javascript" src="http://domain.com/file.js"></script>
<style> ............. </style>
various content
</div>
How can I remove this when loading the page ?
If you are using jquery,
you could use
$(document).ready( function() { $( '#rmid > style' ).remove(); } );
If you plan to not use jQuery, the things changes a little bit:
var parent = document.getElementById("rmid");
parent.querySelector("style").innerHTML = "";
You can call the function <body onload="removeStyles()" This will select all the styles in your above mentioned div with #id = id.
function removeStyles(){
var sty = document.querySelectorAll('div#id style');
for(var i=0; i<sty.length; i++){
sty.item(i).remove();
}
}
When I click on the anchor tag, the image shifts from div#left to div#right. I want the image to be copied. Is this the default behaviour of prepend()? How can I avoid this problem?
The image is just a placeholder for a big div with many children.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="Scripts/JavaScript.js"></script>
</head>
<body>
<div id="left" style="float:left">
<img src="Images/Rooms/K1.jpg" alt="Alternate Text" height="200" width="200"/>
</div>
<div id="right" style="float:right"></div>
<a id="addImageToRight" href="#">Add Image toRight</a>
</body>
</html>
The jQuery is:
$(document).ready(function () {
$("#addImageToRight").click(function () {
var $image = $("#left img");
var imgCopy = $image;
$("div#right").prepend(imgCopy);
});
});
Is this the default behaviour of prepend()?
Yes. Putting a DOM node somewhere in the document requires removing it from wherever in the document it is already. It can't exist in two places at the same time.
var imgCopy = $image;
That copies the value of $image to imgCopy. The value is a reference to the object. (In JavaScript, variables can only every hold references to objects).
How to avoid this problem?
Create a copy of the DOM node. Call .clone() on the jQuery object and prepend the return value.
var imgCopy = $image.clone();
You need to update your code from
var $image = $("#left img");
var imgCopy = $image;
to
var imgCopy = $("#left img").clone();
For reference - http://plnkr.co/edit/R5yjTY06dKkqccwmxS62?p=preview
Perhaps take a look at jQuery's clone() to create a copy of the img element.
I using iframe for displaying a image. Here is my code.
index.html
<html>
<head>
<title>Center</title
<script type="text/javascript">
function sample(id){
var frameht=document.getElementById("ifrm").style.height;
var framewd=document.getElementById("ifrm").style.width;
}
</script>
</head>
<body>
<iframe style="width:700px;height:600px;" src="test.html" id="ifrm" onload="javascript:sample(this.id);"></iframe>
</body>
</html>
test.html
<html>
<head>
<title>Center</title>
<script type="text/javascript">
</script>
</head>
<body>
<img src="14.jpg" id="img1" onload="javascript:sample();"/>
</body>
</html>
I want the id of the image in index.html. Is it possible to get? Any one can help? Please!
document.getElementById('ifrm').contentWindow.document.getElementById('img1');
this should work
img = document.getElementById('ifrm').contentWindow.document.getElementsByTagName('img');
img[0].id to get the dinamically id
First get iframe.
var iframe = document.getElementById('ifrm');
Get access to elements of iframe.
var frameDoc = iframe.contentDocument || iframe.contentWindow.document;
Then, get id by tagname. In our case img.
var el = frameDoc.getElementsByTagName('img')[0].id;
Here is an example without iframe, to give you an idea how to get id of element after:
http://jsfiddle.net/nukec/eymq2/
Insted of id use name and try this..
<script>
window.frames["fName"].document.getElementById("img1");
</script>
<iframe style="width:700px;height:600px;" src="test.htm" id="ifrm" name="fName" onload="javascript:sample(this.id);"></iframe>
You should use jQuery
var imageObj= $('#myiframe').contents().find('img');
var imgId=$(imageObj).attr("id");