Home > Developer > JavaScript
Changing HTML Properties
To change the attributes of an HTML element, use this syntax:
document.getElementById (ID). attribute=new value
This example changes the SRC attribute of the element:
<script type= "Text/javascript" >
document.getElementById ("image"). src= "Landscape.jpg";
</script>
Change HTML Style
To change the style of HTML elements, use this syntax:
document.getElementById (ID). style.property=new style
The following example will change
The style of the element:
Hello world!
<script type= "Text/javascript" >
document.getElementById ("P2"). style.color= "Blue";
</script>
Some people would say that it would be nice to use the jquery $ dollar sign instead of document.getElementById, so let's see
<input id=a type=text/>
$ (' #a '). Val ()
Of course if you don't want to use the jquery plug-in package you can customize $, as follows
JavaScript can define the $ symbol function, shorthand or write compatibility better code.
The code is as follows:
function $ (ID) {return document.getElementById (ID);
The above about the new version of the browser is not a result, if the use of outdated browsers, you can use the above functions
The code is as follows:
function $ (objectId) {
if (document.getElementById && document.getElementById (objectId)) {
The Consortium DOM
return document.getElementById (OBJECTID);
}
else if (document.all && document.all (objectId)) {
MSIE 4 DOM
return document.all (OBJECTID);
}
else if (document.layers && Document.layers[objectid]) {
NN 4 DOM. Note:this won ' t find nested layers
return Document.layers[objectid];
}
else {
return false;
}
}
Element operations in the document.getElementById framework
[Window.] Parent.document.getElementById (' button ')//Find object with ID button in parent page
Parent.document.getElementById ("Frame"). Style.height-----The element with the ID name "frame" on the page to get its display height
function init () {
Parent.document.getElementById ("Frame"). Style.height=document.body.scrollheight;
}
<body leftmargin= "0" topmargin= "0" marginwidth= "0" marginheight= "0" onmouseover= "parent.hideparent ();" Onload= " Init () >
Add:
How to find objects in the parent page from an IFRAME:
1.js
[Window.] Parent//Find the Window object for the parents page
[Window.] Parent.document//Find Document object for parent page
[Window.] Parent.document.body//Find the parent page's body object
[Window.] Parent.document.getElementById (' button ')//Find object with ID button in parent page
2.jquery
$ ([window.] Parent)//Find Window object
$ ([window.] parent.document)//Find the Document object for the parent page
$ ([window.] Parent.document.body)//Find the parent page's body object
$ ([window.] Parent.document.body). Find (' #button ')//Locate the object with the ID button in the parent page
Click the event subpage to control the parent page element.
$ ('. Demo_close '). Click (function () {
$ ( ' #iframeIE ', window.parent.document). Hide ();
});
How to find objects in an IFRAME child page from a parent page:
1. JS code:
document.getElementById (' iframe '). Contentwindow//Find the Window object
for the IFRAME-loaded page document.getElementById (' iframe '). Contentwindow.document//Find the Document object of the IFRAME loaded page
document.getElementById (' iframe '). ContentWindow.document.body//Find IFRAME loaded page body object
document.getElementById (' iframe '). ContentWindow.document.getElementById (' icontent ')/ Find the Object
2.jquery:
$iframe. Contents ()///Icontent The ID of an IFRAME-loaded page. Find the Document Object
$iframe. Contents () for an iframe-loaded page. Find (' body ')//Search the Body object for an IFRAME-loaded page
$iframe. Contents (). Find (' body '). Finding (' #icontent ')//looking for an object with ID icontent for an IFRAME-loaded page
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
