Hvordan bruke DOM å angi bredden attributt av et element
En webutvikler bruker Hyper Text Markup Language (HTML) for å utforme sine nettsider. The Document Object Model (DOM) lar utvikleren å identifisere og dynamisk manipulere nettstedet elementer med Javascript skriptspråk. Ved hjelp av Javascript eller en Javascript-rammeverk som jQuery, kan utbygger velge å sette eller endre bredden på enkelte DOM-elementer basert på et samspill med nettstedets brukere.
HTML DOM kode når du bruker Javascript
En webutvikler kan skrive en HTML DOM element og gi den en ID og et klikk hendelsesbehandling. I dette eksempelet på en knapp element er blitt tildelt ID yourButton og et klikk handler funksjon kalt changeSize.
<Body>
<Input type = "button" id = "yourButton" onclick = "changeSize ()" value = "Change Button width" />
</ Body>
Javascript
En webutvikler koder tilsvarende Javascript element ved hjelp av stille inn bredde eiendom. Han benytter Javascript s getElementByID for å velge den HTML-element og etablerer bredden av elementet med stilen bredde egenskapen. Betrakt følgende eksempel. Dette Javascript vil endre størrelsen på knappen element fra HTML DOM prøven. Når knappen trykkes, blir changeSize funksjon kalt og sette bredden eiendom etablerer den nye størrelsen på knappen en veldig stor 1000 piksler.
<Head>
<Script type = "text / javascript">
funksjon changeSize ()
{
document.getElementById ( "yourButton") style.width = "1000 piksler.";
}
</ Script>
</ Head>
Komplett Javascript Eksempel
Dette full eksempel kombinerer utdrag fra de to foregående eksempler for å demonstrere hvordan DOM element bredde kan manipuleres med Javascript.
<Html>
<Head>
<Script type = "text / javascript">
funksjon changeSize ()
{
document.getElementById ( "yourButton") style.width = "1000 piksler.";
}
</ Script>
</ Head>
<Body>
<Input type = "button" id = "yourButton" onclick = "changeSize ()" value = "Change Button width" />
</ Body>
</ Html>
HTML DOM kode når du bruker jQuery
Igjen webutvikler må skrive HTML-koden. I dette eksempelet en standard avsnitt omslutter tekst.
<Body>
<P> Her er litt tekst. jQuery vil etablere denne størrelsen på elementet som inneholder denne teksten. </ p>
</ Body>
feste jQuery
JQuery rammeverket må vedlegges dokumentet. Rammeverket er tilgjengelig for nedlasting fra jQuery nettside eller kan knyttes til fra Google API.
<Head>
<Script type = "text / javascript" src = "jquery.js"> </ script>
<Script type = "text / javascript">
$ (Document) .ready (function () {
$("p").width(600);
});
</ Script>
</ Head>
<Body>
<P> Her er litt tekst. jQuery vil etablere denne størrelsen på elementet som inneholder denne teksten. </ p>
</ Body>