JavaScript Archives - Page 3 of 9

How to use Form Handling in javascript

by rajeshkumarAugust 13, 2021April 13, 2022JavaScriptLeave a Comment

Form Handling

JavaScript provides access to the forms within an HTML document through the Form object known as HTMLFormElement in the DOM. Which is a child of the Document Object.

Properties

Properties	Value	Description
accept-charset	UTF-8	Specifies the charset used in the submitted form (default: the page charset).
action	URL	Contains a URL that defines where to send the data after submitting the form
autocomplete	On (default) Off	Determines that the browser retains the history of previous values.
enctype		specifies how the browser encodes the data before it sends it to the server. (default: is url-encoded).
encoding		Holds the value of the enctype attribute, which usually contains either application/x-www-form-urlencoded value or the multipart/form-data value (in the case of file upload)
elements[ ]		An array of DOM elements that correspond to the interactive form fields within the form

Properties

Properties	Value	Description
length		The number of a form field with a given form tag. Should bt the same as elements.length
method	GET (default) POST	Specifies how to send the form data to a web server. The data can be sent as URL variables, by using the get method or as HTTP post, by using the post method
name	name	Specifies a name used to identify the form
novalidate	novalidate	Specifies that the browser should not validate the form.
target	_self (default) _blank _parent _top framename	Specifies the target of the address in the action attribute

Methods

Method	Description
checkValidity ( )	Returns a true or false value indicating whether or not all the fields in the form are in a valid state.
reset ( )	Returns all form fields to their initial state.
submit ( )	Submits the form to the URL specified in the form’s action attribute

Events: –

onreset
onsubmit

What is the difference between a timeout and an interval in Javascript?

by rajeshkumarAugust 13, 2021April 13, 2022JavaScriptLeave a Comment

setTimeout( ) Method

The setTimeout() method sets a timer which executes a function or specified piece of code once after the timer expires. The function is only executed once. It returns a positive integer value which identifies the timer created by the call to setTimeout(); this value can be passed to clearTimeout() to cancel the timeout.

Syntax: –
setTimeout (function, milliseconds, para1, para2);
Ex: – var timeoutID = setTimeout(show, 2000);

clearTimeout( ) Method

The clearTimeout() method cancels a timeout previously established by calling setTimeout(). The ID value returned by setTimeout() is used as the parameter for the clearTimeout() method.

Syntax: – clearTimeout (timeoutID);

Ex: – clearTimeout(timeoutID);

setInterval( ) Method

The setInterval() method repeatedly calls a function or executes a code snippet, with a fixed time delay between each call. It returns an interval ID that uniquely identifies the interval, so you can remove it later by calling clearInterval().

Syntax: – setInterval (function, milliseconds, para1, para2);

Ex: – var intervalID = setInterval(show, 2000);

clearInterval( ) Method

The clearInterval() method cancels a timed, repeating action that was previously established by a call to setInterval().

Syntax: – clearInterval (intervalID);

Ex: – clearInterval(intervalID);

Tagged : functions / interval ID / Javascript / Method / Parameters / setInterval( ) / setTimeout()

History Object and Location Object in javascript?

by rajeshkumarAugust 12, 2021April 13, 2022JavaScriptLeave a Comment

History Object

The History object is a read-only array of URL strings that shows where the user has been recently.

Syntax: –

window.history.property

window.history.method

Property

length – It returns the number of URLs in the history list.

Methods

back ( ) – It loads the previous URL in the history list.

forward ( ) – It loads the next URL in the history list.

go ( ) – It access a particular item in the history list relative to the current position. Using a negative value moves to a history item previous to the current location, while a positive number moves forward in the history list.

Location Object

This is used to access the current location (URL) of the window. The Location object can be both read and replaced, so it is possible to update the location of a page through scripting. Location object is a property of Window.

Syntax:-

window.location.property

window.location.method

Properties

hash – The part of the URL including and following the # symbol.
host – The hostname and port number.
hostname – hostname
href – entire URL
pathname – Path relative to the host.
port – Port Number
protocol – Protocol of URL
search – The part of the URL including and after the ?

Methods

assign(URL) – It changes the location of current page with the passed in URL.
reload( ) – Reload the current page.
replace (URL) – Replaces the current page with the given URL in history. As it is replaced in history, it won’t be possible to access the current page with back/forward.

Tagged : History Object / Javascript / Location Object / methods / property

Moving Windows in JavaScript

by rajeshkumarAugust 12, 2021April 13, 2022JavaScriptLeave a Comment

Moving Windows

moveBy ( ) – This method moves the current window by a specified amount of pixels.

Syntax:- window.moveBy(horizontalPixels, verticalPixels);

Where,

window – It is the name of the window to move or is called just window if it is the main window.

horizontalPixels – It is the number of horizontal pixels to move the window where positive numbers move the window to the right and negative numbers to the left.

verticalPixels – It is the number of vertical pixels to move the window where positive number move the window down and negative number up.

Ex:- newWindow.moveBy(200, 200);

Moving Windows

moveTo ( ) – This method moves the window to the specified coordinates.

Syntax:- window.moveTo(x, y);

Where,

window – It is the name of the window to move or is called just window if it is the main window.

x – It is the screen co-ordinate on the x-axis to move the window to.

y – It is the screen co-ordinate on the y-axis to move the window to.

Ex:- newWindow.moveTo(200, 200);

Resizing Windows

Resizing Windows

resizeBy ( ) – This method is used to resize the current window by a certain amount, relative to its current size.

Syntax:- window.resizeBy(width, height);

Where,

window – It is the name of the window to move or is called just window if it is the main window.

width – It is the number of width pixels, where positive numbers increase the window and negative numbers decrease.

height – It is the number of height pixels, where positive numbers increase the window and negative numbers decrease.

Ex:- newWindow.resizeBy(200, 200);

Resizing Windows

resizeTo ( ) – This method is used to resize a window to the specified width and height.

Syntax:- window.resizeTo(width, height);

Where,

window – It is the name of the window to move or is called just window if it is the main window.

width – It is an integer representing the new outerWidth in pixels (including scroll bars, title bars, etc).

height – It is an integer value representing the new outerHeight in pixels (including scroll bars, title bars, etc).

Ex:- newWindow.resizeTo(200, 200);

Scrolling Windows

scrollBy ( ) – This method scrolls the document in the window by the given amount.

Syntax:- window.scrollBy(x, y); or window.scrollBy(options);

Where,

window – It is the name of the window to scroll or is called just window if it is the main window.

x – How many pixels to scroll by, along the x-axis (horizontal). Positive values will scroll to the right, while negative values will scroll to the left

y – How many pixels to scroll by, along the y-axis (vertical). Positive values will scroll down, while negative values scroll up

Options – It is an object with three possible properties:
top, which is the same as the y-coord
left, which is the same as the x-coord
behavior, which is a string containing one of smooth, instant, or auto; default is auto

Note – For this method to work, the visible property of the window’s scrollbar must be set to true!

Scrolling Windows

scrollTo ( ) – This method scrolls to a particular set of coordinates in the document.

Syntax:- window.scrollTo(x, y); or window.scrollTo(options);

Where,

window – It is the name of the window to scroll or is called just window if it is the main window.

x – It is the pixel along the horizontal axis of the document that you want to be displayed in the upper left.

y – It is the pixel along the vertical axis of the document that you want to be displayed in the upper left.

options is an object with three possible properties:
top, which is the same as the y-coord
left, which is the same as the x-coord
behavior, which is a string containing either smooth, instant, or auto; default is auto

Tagged : Javascript / Method / Moving Windows / Resizing Windows / Scrolling Windows

What is a window object in JavaScript? What are its properties?

by rajeshkumarAugust 12, 2021April 13, 2022JavaScriptLeave a Comment

Window Object

Window object represents the browser’s window or potentially frame, that a document is displayed in.
As long as a browser window is open, even if no document is loaded in the window, the window object is defined in the current model in memory.
All global JavaScript variables, functions and objects automatically become members of the window object.

Dialog boxes

It is used to provide some information to users.

Type of Dialog box:-

Alert
Confirm
Prompt

alert ( ) Method

This Window object’s method is used to display data in the alert dialog box. alert really should be used only when you truly want to stop everything and let the user know something.

Syntax:- window.alert( ) or alert ( )

confirm ( ) Method

This Window object’s method is used to display a message for a user to respond to by pressing either an OK button to agree with the message to a Cancel button to disagree with the message. It returns true on OK and false on Cancel.

Syntax:- window.confirm( ) or confirm ( )

prompt ( ) Method

Window object’s method prompt() can be used to get input from the user, named prompt. The prompt( ) method displays a dialog box that prompts the visitor for input.

Once the prompt function obtains input from the user, it returns that input. If the user press the cancel button in the dialog or close box, a value null will be returned.

Syntax: – prompt(text, defaultText)

open ( ) Method

The open( ) method creates a new secondary browser window, similar to choosing New Window from the File menu. It returns a Window object representing the newly-created window. If the window couldn’t be opened, the returned value is instead null.

Syntax: – window.open (URL, name, features, replace)

URL – URL indicates the document to load into the window. If no URL is specified, a new window with about: blank is opened

Name – Specifies the target attribute or the name of the window. The following values are supported:

_blank – URL is loaded into a new window. This is default
_parent – URL is loaded into the parent frame
_self – URL replaces the current page
_top – URL replaces any framesets that may be loaded

open ( ) Method

Syntax: – window.open (URL, name, features, replace)

Features – It is a comma-delimited string that lists the features of the window.

Replace – It indicates whether or not the URL specified should replace the window’s contents. This would apply to a window that was already created. Value can be true/false.

Features

Feature Parameter	Value	Example
alwaysLowered	yes/no	alwaysLowered=yes
alwaysRaised	yes/no	alwaysRaised=no
centerscreen	yes/no	centerscreen=yes
chrome	yes/no	chrome=yes/true
close	yes/no	close=no
dialog	yes/no	dialog=yes
dependent	yes/no	dependent=yes
z-lock	yes/no	z-lock=yes
hotkeys	yes/no	hotkeys=yes

Features

Feature Parameter	Value	Example
location	yes/no	location=no
menubar	yes/no	menubar=no
minimizable	yes/no	minimizable=no
modal	yes/no	modal=yes
personalbar	yes/no	personalbar=yes/true
resizable	yes/no	resizable=no
scrollbars	yes/no	scrollbars=no
status	yes/no	status=no
titlebar	yes/no	titlebar=yes

Features

Feature Parameter	Value	Example
toolbar	yes/no	toolbar=yes
top	pixel value	top=20
height	pixel value	height=200
width	pixel value	width=200
innerHeight	pixel value	innerHeight=200
innerWidth	pixel value	innerWidth=200
outerHeight	pixel value	outerHeight=200
outerWidth	pixel value	outerWidth=200
left	pixel value	left=20

close ( ) Method

Once a window is open, the close ( ) method is used to close it. It closes the current window or the window on which it was called. This method is only allowed to be called for windows that were opened by a script using the window.open() method. It is often used together with open ( ) method.

Syntax: – window.close ( )

Tagged : Javascript / Method / Parameter / properties / window object

What is Event in Javascript?

by rajeshkumarAugust 12, 2021April 13, 2022JavaScriptLeave a Comment

What is Event

The actions to which JavaScript can respond are called Events. An Event is some notable action to which a script can respond.

Clicking an element
Submitting a form
Scrolling page
Hovering an element

Event Handler

An Event handler is JavaScript code associated with a particular part of the document and a particular event. A handler is executed if and when the given event occurs at the part of the document to which it is associated.

onclick
ondblclick
onchange
onblur

Event Binding with HTML Attribute

These bindings are element attributes, such as onclick and on change, which can be set equal to JavaScript that is to be executed when the given event occurs at that object.

Ex: – <button onclick= “alert(‘Button Clicked’);”>Click Me</button>

Event Binding with JavaScript

When we use this approach we can add or remove handlers dynamically as well as it improves the separation between the structure of the document and its logic and presentation.

Ex: –

Event Binding with JavaScript

Overwriting Event Handler

DOM Event Model

The DOM 2 Event Model specification describes a standard way to create, capture, handle and cancel event in a tree like structure such as an XHTML document’s object hierarchy.

Phases

Capture Phase
Target Phase
Bubbling Phase

addEventListener ( )

This method is introduced by DOM2, used to engage an event handler in a page.

Syntax:-
Object.addEventListener(event, handler, capturePhase);

Where,

Object is the node to which the listener is to be bound.
Event is a string indicating the type of event.
Handler is the function that should be called when the event occurs.
capturePhase is a Boolean indicating whether to use Bubbling (false) or Capture (true). This is optional. If you omit there is false by default.

Ex:-
btn.addEventListener(“click”, show, false);

Why we should use addEventListener ( ) ?

Why we should use addEventListener ( )

It allows you to bind multiple handlers to an object for the same event.

It enables you finer-grained control of the phase when the listener is activated (Capture or Bubbling).

It works on any DOM element, not just HTML elements.

removeEventListener ( )

DOM Event Flow/ Event Propagation

The DOM 2 Event Model specification describes a standard way to create, capture, handle and cancel event in a tree like structure such as an XHTML document’s object hierarchy.

Phases

Capture Phase
Target Phase
Bubbling Phase

Event Object

DOM events pass an Event object as an argument to handlers. This object contains extra information about the event that occurred.

Ex:- addEventListener(“click”, function(e) { });

Event Methods

stopPropagation() – Prevents further propagation of the current event in the capturing and bubbling phases.

Syntax:- e.stopPropagation();

stopImmediatePropagation() – Prevents other listeners of the same event from being called.

Syntax:- e.stopImmediatePropagation();

preventDefault() – The Event interface’s preventDefault() method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.

Syntax:- e.preventDefault();

Mouse Event

mousedown – It fires when mouse button is pressed down.
mouseup – It fires when the mouse button is released.
click – It fires when something is clicked. mousedown, mouseup and click events fires in sequence.
dblclick – It fires when something is clicked twice in rapid succession. mousedown, mouseup, click, mousedown, mouseup, click, and dblclick events fires in sequence.
mouseenter – It fires when a mouse starts to hover over some element. NO bubble.
mouseleave – It fires when a mouse exits while hovering over some element. No bubble.
mouseover – It fires when mouse is hovering over some element.
mouseout – It fires when mouse leaves from hovering over some element.
mousemove – It fires when the mouse moves.
contextmenu – It fires when mouse right button is clicked.

Focus Event

focus – It fires when an element gains focus, such as selecting a form field. No Bubble

blur – It fires when element loses focus, such as moving away from a form field. No Bubble

focusin – It fires just as an element is about to gain focus.

focusout – It fires just as an element loses focus and just before the blur event.

Key Event

keydown – It fires as a key is pressed down.

keypress – It fires after a key is pressed down (after keydown). It only works with printable characters.

keyup – It fires as the key is released.

Tagged : Attributes / events / HTML / Javascript

How do I manipulate using DOM Table in JavaScript?

by rajeshkumarAugust 10, 2021April 13, 2022JavaScriptLeave a Comment

HTMLTableElement

HTMLTableElement interface provides special properties and for manipulating the layout and presentation of tables in an HTML document.

Properties
caption
tHead
tFoot
rows
tBodies

Methods
createCaption()
deleteCaption()
createTHead()
deleteTHead()
createTFoot()
deleteTFoot()
insertRow()
deleteRow()

Properties

caption – This property represents the table caption. If no caption element is associated with the table, it can be null.

tHead – This property represents the table’s <thead> element. Its value can be null if there is no such element.

tFoot – This property represents the table’s <tfoot> element. Its value can be null if there is no such element.

rows – This property rows returns a live HTMLCollection of all the rows in the table, including the rows contained within any <thead>, <tfoot>, and <tbody> elements. Although the property itself is read-only, the returned object is live and allows the modification of its content.

tBodies – This read-only property returns a live HTMLCollection of the table bodies. Although the property is read-only, the returned object is live and allows the modification of its content.

Methods

createCaption() – This method returns the caption for the table. If no caption element exists on the table, this method creates it, then returns it.

deleteCaption() – This method removes the caption from the table. If there is no caption associated with the table, this method does nothing.

createTHead( ) – This method returns the <thead> element association with the table, of type HTMLTableSectionElement. If there is no such element associated to the table, this method creates it, then returns it.

deleteTHead() – This removes a <thead> element from the table.

createTFoot() – This method returns the <tfoot> element associated with the table, of type HTMLTableSectionElement. If there is no footer for this table, this methods creates it, then returns it.

deleteTFoot() – This method removes a <tfoot> element from the table.

insertRow() method inserts a new row in the table and returns a reference to the new row.

Syntax: – var row = HTMLTableElement.insertRow(index = -1);

index is the row index of the new row.
row is assigned a reference to the new row. A reference to HTMLTableRowElement.
If index is -1 or equal to the number of rows, the row is appended as the last row. If index is greater than the number of rows, an IndexSizeError exception will result. If index is omitted it defaults to -1.
If a table has multiple tbody elements, by default, the new row is inserted into the last tbody.

deleteRow() method removes a row from the table. If the number of rows to delete, specified by the parameter, is greater or equal to the number of available rows, or if it is negative and not equal to the special index -1, representing the last row of the table, the exception INDEX_SIZE_ERR is thrown.

Syntax: – HTMLTableElement.deleteRow(index)

an index is an integer representing the row that should be deleted.
However, the special index -1 can be used to remove the very last row of a table.

HTMLTableSectionElement

The HTMLTableSectionElement interface provides special properties and methods for manipulating the layout and presentation of sections, that is headers, footers and bodies, in an HTML table.

Properties
rows

Methods
insertRow()
deleteRow()

Rows – This returns a live HTMLCollection containing the rows in the section. The HTMLCollection is live and is automatically updated when rows are added or removed.

insertRow() – It inserts a new row just before the given position in the section. If the given position is not given or is -1, it appends the row to the end of section. If the given position is greater (or equal as it starts at zero) than the amount of rows in the section, or is smaller than -1, it raises a DOMException with the IndexSizeError value.

deleteRow() – It removes the cell at the given position in the section. If the given position is greater (or equal as it starts at zero) than the amount of rows in the section, or is smaller than 0, it raises a DOMException with the IndexSizeError value.

HTMLTableRowElement

The HTMLTableRowElement interface provides special properties and methods for manipulating the layout and presentation of rows in an HTML table.

Properties
cells
rowIndex
sectionRowIndex

Methods
insertCell()
deleteCell()

Properties

cells – It returns a live HTMLCollection containing the cells in the row. The HTMLCollection is live and is automatically updated when cells are added or removed.

rowIndex – It returns a long value which gives the logical position of the row within the entire table. If the row is not part of a table, returns -1.

sectionRowIndex – It returns a long value which gives the logical position of the row within the table section it belongs to. If the row is not part of a section, returns -1.

Methods

insertCell() – This method inserts a new cell into a table row and returns a reference to the cell.

Syntax: – var cell = HTMLTableRowElement.insertCell(index = -1);

HTMLTableRowElement is a reference to an HTML table row element.
index is the cell index of the new cell.
cell, is assigned a reference to the new cell.
If index is -1 or equal to the number of cells, the cell is appended as the last cell in the row. If index is greater than the number of cells, an IndexSizeError exception will result. If index is omitted it defaults to -1.

Methods

deleteCell() – It removes the cell at the given position in the row. If the given position is greater (or equal as it starts at zero) than the amount of cells in the row, or is smaller than 0, it raises a DOMException with the IndexSizeError value.

Tagged : HTML / Javascript / methods / properties

CSS manipulation in JavaScript

by rajeshkumarAugust 10, 2021April 13, 2022JavaScriptLeave a Comment

CSSStyleDeclaration Object

The CSSStyleDeclaration object represents a collection of CSS property-value pairs.

It is used in API :

HTMLElement.style
window.getComputedStyle( )

Properties

cssText
length
parentRule

Methods

getPropertyValue(property)
getPropertyPriority(property)
removeProperty(property)
setProperty(property, value, priority)
item(index)

Style Property

The style property is used to get or set the inline style of an element. While getting, it returns a CSSStyleDeclaration object that contains a list of all styles properties for that element with values assigned for the attributes that are defined in the element’s inline style attribute.

Style Property represents only the CSS declarations set in the element’s inline style attribute, not those that come from style rules elsewhere, such as style rules in the <head> section, or external style sheets or browser default.

Syntax:-

Return
element.style.property

Set
element.style.property = “value”

A style declaration is reset by setting it to null or an empty string, e.g. element.style.property = null

Inline Style Manipulation

The most direct way to modify CSS value with JavaScript is through the style property that corresponding to the inline style sheet specification for a particular HTML element. To perform a manipulation of the CSS with a JavaScript DOM interface, you would access the style object of the element.

Style Property

Example: –

Dynamic Style Manipulation

As we know The most direct way to modify CSS value with JavaScript is through the style property that corresponding to the inline style sheet specification for a particular HTML element, This has performance considerations since you need to change a single property at a time. We might manipulate style rules using CSS class Selector. The element’s class attribute is represented as className property in DOM.

DOMTokenList

The DOMTokenList interface represents a set of space-separated tokens. Such a set is returned by Element.classList, HTMLLinkElement.relList, HTMLAnchorElement.relList, HTMLAreaElement.relList, HTMLIframeElement.sandbox, or HTMLOutputElement.htmlFor. etc. It is indexed beginning with 0 as with JavaScript Array objects. DOMTokenList is always case-sensitive.

Properties
length
value

Methods
item()
add()
remove()
replace()
contains()
toggle()
value()

classList Property

The Element.classList is a read-only property that returns a live DOMTokenList collection of the class attributes of the element.

Syntax: –

var elementClasses = elementNodeReference.classList;

Computed Style

The computed style is the style actually used in displaying the element, after “stylings” from multiple sources have been applied.
Style sources can include: internal style sheets, external style sheets, inherited styles, and browser default styles.
Style Property represents only the CSS declarations set in the element’s inline style attribute, not those that come from style rules elsewhere, such as style rules in the section, or external style sheets or browser default. To get the values of all CSS properties for an element you should use window.getComputedStyle( ) instead.
The returned style is a live CSSStyleDeclaration object ( The CSSStyleDeclaration object represents a collection of CSS property-value pairs.), which updates itself automatically when the element’s style is changed.

Syntax:-
window.getComputedStyle(element, pseudoElement)
Element – Element for which to get the computed style.
pseudoElement – A string specifying the pseudo-element to match. Must be omitted (or null) for regular elements.

Ex: –
var elm = document.getElementById(“myid”);
var allCSSProp = window.getComputedStyle(elm)

Tagged : css / Javascript / Manipulation / methods / objects / properties

HTML-DOM and CSS-DOM Mapping in JavaScript

by rajeshkumarAugust 10, 2021April 13, 2022JavaScriptLeave a Comment

HTML-DOM Mapping

Many object properties are simply direct mapping to the attributes of the HTML element. In other words, there is a mapping directly between HTML Syntax and the DOM.

Ex:-

Above title can be accessed in DOM by
document.getElementById(“myid”).title

P tag’s title attribute is mapped to DOM property title in the above example that is the reason we can access title in DOM that way.

HTML-DOM Mapping

The mapping is direct between HTML attributes and the DOM properties with the following considerations:-

The mapping is direct if the attribute is a single non-reserved word, so an element’s title attribute is accessed via the corresponding DOM object’s title property.
The mapping will change case as camelCase if the attribute has two word. Ex:- tabindex attribute will be represented tabIndex in the DOM.
If the HTML attribute name is reserved under JavaScript, the value will be modified to work. Ex:- class attribute will be represented className in DOM for attribute will be represented htmlFor in DOM
There are also some exception. Ex: – char attribute will be represented ch in DOM
For others and custom attributes, we have to use getAttribute() and setAttribute( ) Methods because they may not have direct mapping.

CSS-DOM Mapping

We can modify the CSS Properties by applying a mapping between the CSS property and the DOM object. The mapping is direct between CSS properties and the DOM properties with the following considerations:-

CSS properties have a single word, so their mapping is direct. Ex:- color in CSS will be represented as color in DOM too.
Hyphenated CSS properties are repsrented as a single word with camelCase in the DOM. Ex:- background-color in CSS will be represented as backgroundColor in DOM
CSS properties value with vendor prefixs. Ex:- -webkit-box-shadow in CSS will be represented as webkitBoxShadow in DOM.
There are some reserved words which can be exception in the above cases. Ex – float in CSS will be represented as cssFloat in DOM

Tagged : css / DOM / HTML / Javascript / Mapping

Manipulation Attributes in JavaScript

by rajeshkumarAugust 10, 2021April 13, 2022JavaScriptLeave a Comment

Attributes

The attributes property returns a live collection of all attribute nodes registered to the specified node. It is a read-only property.

Syntax:-
Element.attributes[index/key]

Attr Object

Properties

name (do not use nodeName)
value (do not use nodeValue or textContent or appendChild() or insertBefore( ) or removeChild( ) or replaceChild( ) these all are deprecated for attr object)

Methods

setAttribute( )
getAttribute( )
removeAttribute( )

setAttribute( )

This method is used to set the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise, a new attribute is added with the specified name and value. We should not use this method to set inline style as it will overwrite other CSS properties.

Syntax:-
Element.setAttribute(name, value);
Element.setAttribute(“style”, “css properties: value”);

Ex: –
p.setAttribute(“id”, “mydiv”);
p.setAttribute(“style”, “font-size: 80px”);

getAttribute( )

The getAttribute() returns the value of a specified attribute on the element. If the given attribute does not exist, the value returned will either be null or “ ”.

Syntax: –
var attribute = element.getAttribute(attributeName);

removeAttribute( )

This method is used to remove an attribute from the specified element.

Syntax: –
element.removeAttribute(attrName);

hasAttribute( )

The hasAttribute() method returns a Boolean value indicating whether the specified element has the specified attribute or not.

Syntax:-
var result = element.hasAttribute(attr_name);

Tagged : Attributes / css / Javascript / Method / properties