Archive for November, 2009

0

currentStyle Property

Posted by admin - November 5, 2009

Value: style object

Compatibility: WinIE5+, MacIE5+

Every element has style atrributes applied to it even if those atrributes are the browser’s default settings. Because an element’s style object reflects only those properties whose corresponding atrributes are set via CSS statements , you can not use the style property of an element object to view default style settings applied to an element.That’s where the currentStyle property comes in.

This property returns a read-only style object that contains values for every possible style property applicable to the element.

Related items: runtimeStyle, window.getComputedStyle( )

0

contentEditable Property

Posted by admin - November 3, 2009

Value: Boolean

Compatibility: WinIE5.5+

Element tags can include a contentEditable attribute , whose value is echoed via the contentEditable property of the element. The default value for this property is inherit , which means that the property inherits whatever setting this property has in the hierarchy of HTML containers outward to the body. If you set the contentEditable property to true that element and all nested elements set to inherit the value become editable, conversely a setting of false turns off the option to edit the content.

Code:

<html>
 <head>
 <title>contentEditable property</title>
 <style type="text/css">
 .normal{color:black;}
 .editing{color:red}
 </style>
 <script type="text/javascript">
 function toogleEdit()
 {
   var newState = !editableText.isContentEditable;
   editableText.contentEditable = newState;
   editableText.className = (newState) ? "editing" : "normal";
   editBtn.innerText = (newState) ? "Disable Editing" :"Enable Editing";
 }
 </script>
 </head>
 <body>
 <h1>Editing Contents</h1>
 <hr />
 <p>Turn on editing to modify the follolwing text:</p>
 <div id="editableText">
 Edit this text on the fly...
 </div>
 <p>
 <button id="editBtn" onclick="toogleEdit()" onfocus="this.blur()">Enable Editing</button>
 </p>
 </body>
 </html>

Related items: isContentEditable property

Previous Page