setAttribute inserire piu valori

**techno** · 23-06-2022, 11:24

Ciao a tutti
Posso inserire più valori on setAttribute in questo modo?

codice:

const dc = document.querySelector(".element");


            dc.parentNode.setAttribute({
                'position' : 'relative',
                'display' : 'flex',
                'align-items' : 'center',
                'flex-wrap' : 'nowrap'
            });

**Dascos** · 23-06-2022, 11:32

con jquery sì, certo, però devi usare attr e non setAttribute.

codice:

$( "#greatphoto" ).attr({  alt: "Beijing Brush Seller",
  title: "photo by Kelly Clark"
});

Se invece vuoi usare il setAttribute di JavaScript no, un attributo, un valore

**alka** · 23-06-2022, 11:41

Originariamente inviata da techno

Ciao a tutti
Posso inserire più valori on setAttribute in questo modo?

Il metodo setAttribute() modifica il valore di un attributo dell'elemento: nel tuo caso, tu stai modificando le proprietà di stile CSS, che sono un'altra cosa e sono accessibili attraverso la proprietà style dell'elemento stesso, a meno di non voler sfruttare comunque setAttribute() ma selezionando "style" come attributo e mettendo come valore la stringa con le proprietà CSS da impostare.

Ciao!

**techno** · 23-06-2022, 12:06

Originariamente inviata da alka

Il metodo setAttribute() modifica il valore di un attributo dell'elemento: nel tuo caso, tu stai modificando le proprietà di stile CSS, che sono un'altra cosa e sono accessibili attraverso la proprietà style dell'elemento stesso, a meno di non voler sfruttare comunque setAttribute() ma selezionando "style" come attributo e mettendo come valore la stringa con le proprietà CSS da impostare.

Ciao!

Ok capito usero setAttribute con una stringa

**ninja72** · 23-06-2022, 14:49

codice:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .test1 {
            position: relative;
            display: flex;
            align-items: center;
            flex-wrap: nowrap
        }

        .test2 {
            background-color: red;
            color: blue;
        }
    </style>
</head>

<body>
    <div id="kilo"></div>
    <div class="kilo"></div>
    <div class="kilo"></div>

    <div id="mega"></div>
    <div class="mega"></div>
    <div class="mega"></div>

    <div id="giga"></div>
    <div class="giga"></div>
    <div class="giga"></div>

    <script>
        const kiloID = document.getElementById('kilo')
        const kiloClass = document.getElementsByClassName('kilo')

        const megaID = document.getElementById('mega')
        const megaClass = document.getElementsByClassName('mega')

        const gigaID = document.getElementById('giga')
        const gigaClass = document.getElementsByClassName('giga')

        const attributes1 = {
            'position': 'relative',
            'display': 'flex',
            'align-items': 'center',
            'flex-wrap': 'nowrap'
        }

        const attributes2 = {
            'background-color': 'red',
            'color': 'blue'
        }

        //////////////////////////////////////// metodo 1

        const setElement = (el, attr) => {
            Object.keys(attr).forEach(k => {
                el.style[k] = attr[k]
            })
        }

        const setAttributes = (el, attr) => {
            if (el.length > 0) {
                Array.from(el).forEach(classEl => {
                    setElement(classEl, attr)
                })
            } else {
                setElement(el, attr)
            }
        }

        setAttributes(kiloID, attributes1)
        setAttributes(kiloID, attributes2)
        setAttributes(kiloClass, attributes2)

        //////////////////////////////////////// metodo 2

        const setEl = (el, attr) => {
            let mystyle = ''
            Object.keys(attr).forEach(k => {
                mystyle += `${k}:${attr[k]};`
            })
            el.setAttribute('style', mystyle)
        }

        const setAttr = (el, attr) => {
            if (el.length > 0) {
                Array.from(el).forEach(classEl => {
                    setEl(classEl, attr)
                })
            } else {
                setEl(el, attr)
            }
        }

        setAttr(megaID, attributes1)
        // setAttr(megaID, attributes2)
        setAttr(megaClass, attributes2)

        /////////////////////////////////////// metodo 3

        gigaID.classList.add('test1')
        gigaID.classList.add('test2')
        Array.from(gigaClass).forEach(el => {
            el.classList.add('test2')
        })


    </script>
</body>

</html>

Discussione: setAttribute inserire piu valori

Strumenti discussione

Ricerca discussione

Visualizza

setAttribute inserire piu valori

Permessi di invio