Visualizzazione dei risultati da 1 a 5 su 5
  1. #1

    setAttribute inserire piu valori

    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'
                });

  2. #2
    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

  3. #3
    Moderatore di Programmazione L'avatar di alka
    Registrato dal
    Oct 2001
    residenza
    Reggio Emilia
    Messaggi
    24,079
    Quote Originariamente inviata da techno Visualizza il messaggio
    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!
    MARCO BREVEGLIERI
    Software and Web Developer, Teacher and Consultant

    Home | Blog | Delphi Podcast | Twitch | Altro...

  4. #4
    Quote Originariamente inviata da alka Visualizza il messaggio
    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

  5. #5
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    256
    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>

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2022 vBulletin Solutions, Inc. All rights reserved.