​x
 
<!DOCTYPE html>
<html>
​
<head>
<style>
    .democlass {
        border: 2px dotted red;
    }
</style>
</head>
​
<body>
    <p>Click the button to add a attribute to change style of this para.</p>
    <p id="output"></p>
    <p id="output2"></p>
​
    <button onclick="addFunction()">Add attr</button>
​
    <button onclick="remFunction()">Remove Attr</button>
​
    <script>
        function addFunction() {
​
            //Sets Attribute class with value democlass
            document.getElementsByTagName("p")[0].setAttribute("class", "democlass"); 
            var attr = document.getElementsByTagName("p")[0];
​
            //Displays: Attribute name class added, of value democlass
            alert("Attribute name " + attr.attributes[0].name + " added, of value " + attr.attributes[0].value);
        }
​
        function remFunction(){
            var attr = document.getElementsByTagName("p")[0];
         //Attribute "class" present before removal 
         alert("Before removal attr " + attr.getAttribute("class"));
         document.getElementsByTagName("p")[0].removeAttribute("class");
         //Shows Attribute "class" as null 
         alert("After removal attr " + attr.getAttribute("class"));
        }
    </script>
</body>
​
</html>