Javascript Lezione 49

<!DOCTYPE html>
<html lang="EN">
<head>
    <meta charset="utf-8">
    <title>DOM1</title>

    <link rel="stylesheet" href="style.css">

    <style>
        img {width: 50px; height: 50px;}
    </style>

</head>
<body>
    <div id='div1'>
        <p id="p1">primo paragrafo</p>
        <p id="p2">secondo paragrafo
                   <img id="img1" src="teatro.png" alt="Locandina Teatro">
        </p>
    </div>


    <div id='div2'>
        <a href="https://www.bbc.com">sito bbc</a>
    </div>

    <script>
        //RESTITUISCONO UN SOLO OGGETTO
        //getElementById('questo_id') -> oggetto con quell'id
        //querySelector('pattern_ricerca_alla_CSS') -> il primo che soddisfa il pattern

        //testo rosso e dimensione carattere 35px al testo del paragrafo id='p1'

        const par_p1 = document.getElementById('p1');

        //if (par_p1!==null){
        if (!par_p1){ // "", '', undefined, false, NaN
            //gestione errore
        }
        else
        {
            //  .style agisce  sugli stili IN LINEA
            par_p1.style.fontSize = '2em';
            par_p1.style.color = 'green';
        }

        const img1 = document.getElementById('img1');

        //getComputedStyle tiene conto di TUTTI gli stili
        const stili_img1 = window.getComputedStyle(img1);

        const widthAttuale = parseInt(stili_img1.width); //da 50px al numero 50
        const heightAttuale = parseInt(stili_img1.height);

        img1.style.width = widthAttuale*2+"px";
        img1.style.height = heightAttuale*2+"px";

        //sovrascrive TUTTI gli stili in line
        //par_p1.style.cssText = "background-color: blue; font-size: 40px";

        //NO! fuori standard:  par_p1.style = "background-color: blue; font-size: 40px";
        Object.assign(par_p1.style, {backgroundColor: 'yellow', fontSize: '40px'});

        //stili embedded (sezione <style>)

        //caso <style> assente

        //a) creiamo il tag <style>
        //const style = document.createElement('style');

        document.head.style.innerHTML += `
          .p2 {background-color: lightgray;}
          .banner {fontSize: 30px; color: silver;}
          .ad {}
        `

        //b) impostiamo le regole
        // style.innerHTML = `
        //   .p2 {background-color: lightgray;}
        //   .banner {fontSize: 30px; color: silver;}
        //   .ad {}
        // `

        //c) innestiamo il tag dentro <head>
        //document.head.appendChild(style);

        document.styleSheets[0].insertRule('body {border: 4px solid red;}',0);
        document.styleSheets[0].deleteRule(1);

        // console.log(document.styleSheets[1]);

        //RESTITUISCONO UN INSIEME DI OGGETTI
        //getElementsByName('questo_name')
        //getElementsByTagName('questo_tag')
        //getElementsByClassName('questa_classe')
        //querySelectorAll('pattern_ricerca_alla_CSS')

    </script>
</body>
</html>