Document Object Module DOM CSS Styling Methods tutorial in JavaScript

 <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM CSS Styling Methods JavaScript</title>
    <link rel="stylesheet" href="css/dom-css-styling-method.css">
</head>

<body>
    <div id="wrapper">
        <div id="header" class="abc xyz efg" style="border:1px solid #ff0000;color:#ffa500;">
            <h1>Hello World</h1>
        </div>
        <div id="menu">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">About Us</a></li>
                <li><a href="">Gallery</a></li>
                <li><a href="">Contact Us</a></li>
            </ul>
        </div>
        <div id="content">
            <h2>Sub Heading</h2>
            <img src="images/Web_Designing.jpg" width="200px" class="content-image" alt="">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, veniam eius architecto ullam
                cupiditate quam aspernatur quis facilis tempora vel! Aspernatur, consequatur, laborum, explicabo
                consequuntur minima beatae perferendis impedit accusantium ex animi odit quisquam sint pariatur minus
                amet ullam reprehenderit rerum inventore sed officiis voluptas? Dolore, perferendis, minus eum debitis
                vero ipsam tempora voluptate nam ut autem itaque provident consequatur nobis quia libero! Magni,
                molestiae, laborum architecto natus inventore facere quis pariatur quia quos quasi quo dicta dolores.
                Deleniti, facere, fugit sed minus ducimus ut modi voluptatum eaque praesentium saepe aperiam nam quidem
                laboriosam assumenda voluptate vitae inventore et quibusdam!</p>
            <ul class="list">
                <li>Lorem ipsum dolor sit amet.</li>
                <li>sit amet consectetur adipisicing elit.</li>
                <li>architecto maxime quam eligendi,</li>
                <li>quia eius cumque officia,</li>
                <li>ipsam aliquam veniam perferendis vitae</li>
            </ul>
            <p class="list">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, repellat.</p>
        </div>
        <div id="sidebar">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">About Us</a></li>
                <li><a href="">Gallery</a></li>
                <li><a href="">Contact Us</a></li>
            </ul>
        </div>
        <div id="footer">
            helloworld@copyright 2024.
        </div>
    </div>
    <script src="js/dom-css-styling-methods.js"></script>
</body>

</html>





Below File is css/dom_css_styling_method.css File
* {
    box-sizing: border-box;
}

body {
    font: 18px/24px arial;
}

#wrapper {
    border: 1px solid black;
    width: 1000px;
    background: #ffffff;
    margin: 0 auto;
}

#header {
    min-height: 100px;
    font-family: arial;
    border-bottom: 1px solid black;
    /* background: #ff0000; */

}

.abc {
    background: #dc143c;
}

.xyz {
    background: #008000;
}

#header h1 {
    padding: 30px 0 0 20px;
    margin: 0;
    color: #ffffff;
}

#menu {
    border-bottom: 1px solid black;
    background: #9370d8;
}

#menu ul {
    margin: 0;
    padding: 0;
}

#menu li {
    display: inline-block;
}

#menu li a {
    display: block;
    padding: 10px 13px;
    text-decoration: none;
    color: #ffffff;
}

#content {
    width: 795px;
    min-height: 500px;
    padding: 15px;
    float: left;
    box-sizing: border-box;
    position: relative;
}

#content h2 {
    font-family: arial;
}

.content-image {
    float: left;
    margin: 0 15px 10px 0;
}

#sidebar {
    width: 200px;
    min-height: 500px;
    float: right;
    border-left: 1px solid black;
    background: #e0d6f6;
}

#sidebar a {
    text-decoration: none;
    color: black;
}

#footer {
    padding: 5px 10px;
    text-align: right;
    font-size: 14px;
    clear: both;
    border-top: 1px solid black;
    background: #ff0000;
    color: #ffffff;
}

@import "mediatest.css" screen and (max-width: 1020px);

@media screen and (max-width:810px) {
    #wrapper {
        width: 500px;
    }

    #content {
        width: 65%;
    }

    #sidebar {
        width: 34%;
    }
}

@media screen and (max-width:510px) {
    #wrapper {
        width: auto;
    }

    #content {
        width: 100%;
        float: none;
    }

    #sidebar {
        width: 100%;
        float: none;
    }

    #header h1 {
        padding: 30px 0 0 0;
        text-align: center;
    }
}





Below File is js/dom_css_styling_methods.js File
var element;
// element = document.querySelector("#header").style.border;
// console.log(element);
// element = document.querySelector("#header").style.color;
// console.log(element);
// document.querySelector("#header").style.backgroundColor="#d2b487";
// document.querySelector("#header").style.color = "#0000ff";
// element = document.querySelector("#header").style.color;
// console.log(element);

//className will return a simple String
document.querySelector("#header").className = "abc xyz";
element = document.querySelector("#header").className;
console.log(element);

//classList will return a Array
document.querySelector("#header").classList = "abc xyz";
element = document.querySelector("#header").classList;
console.log(element);

document.querySelector("#header").classList.add("xyz", "efg");
element = document.querySelector("#header").classList;
console.log(element);

document.querySelector("#header").classList.remove("xyz");
element = document.querySelector("#header").classList;
console.log(element);




Comments

Post a Comment

Popular posts from this blog

Generators tutorial in Advance JavaScript

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0, shrink-to-fit=no" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > Generators Advance JavaScript </ title >     < link rel = "stylesheet" href = "" > </ head > < body >     < script >         //Example 1 :         // function* generateit() {         //     console.log("First Message");         //     yield "Yield No. 1"; //Here Statement will be Pause, To remove the Pause we have to call next() method again as shown below         //     console.log("Second Message");         //     yield "Yield No. ...
Read more

Document Object Module DOM querySelector and querySelectorAll tutorial in JavaScript

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0, shrink-to-fit=no" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > DOM querySelector querySelectorAll JavaScript </ title >     < link rel = "stylesheet" href = "css/main.css" > </ head > < body >     < div id = "wrapper" >         < div id = "header" class = "abc" style = " border:1px solid #ff0000;" onClick = "xyz()" >             < h1 > Hello World </ h1 >             < h1 > Welcome </ h1 >         </ div >         < div id = "menu" >             < ul >...
Read more

Find Even and Odd Numbers with Loops tutorial in JavaScript

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0, shrink-to-fit=no" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > Even Odd Numbers with Loops </ title >     < script >         for ( var a = 1 ; a <= 10 ; a ++) {             if ( a % 2 == 0 ) {                 document . write ( "Even Number : " + a + "<br>" );             }         }         for ( var b = 1 ; b <= 10 ; b ++) {             if ( b % 2 != 0 ) {                 document . write ( "Odd Number : " + b + "<br>"...
Read more