Perché i browser sostituiscono il valore della larghezza assegnato tramite css?

Question

Quando assegno uno stile di base a tutti i seletti es.

width: 300px; 
padding: 0; 
margin: 0; 
border-width: 1px; 

Ottengo risultati imprevisti quando si recupera la larghezza tramite javascript in circostanze diverse.

• Quando il prescelto è visibile il con è 298px.
• Quando il select è display: none, la larghezza è anche 298px (ff, jquery)
• Quando il selezionare è in un div con display: none, la larghezza è corretto 300px.

(il risultato è anche la stessa assegnazione: box-sizing: border-box)

Beh, la larghezza recuperate a volte è diverso dal browser utilizzato e framework javascript, ma tutto sommato Voglio solo essere in grado di recuperare la larghezza assegnata (300px). (Credo che abbia qualcosa a che fare con la "stranezza formale" ha dichiarato qui: http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/, ma perché i browser non utilizzeranno la larghezza assegnata dall'utente ??)

Come posso recuperare la larghezza assegnata? C'è davvero un modo per farlo?

Esempi:

http://jsfiddle.net/ETCcH/5/ (per l'utilizzo di jQuery, o sostituire il 5 con un 4 per un esempio di utilizzo MooTools)

(vista e provare con diversi browser)

Answer 1

Lei non potrà mai ottenere il valore scritto nel file css. Con JavaScript otterrai solo le proprietà css attualmente applicate a quell'elemento dal browser web.

Nel caso in cui la larghezza sia veramente fissa, è possibile "forzarla" con larghezza massima impostata su 300 px o aggiungendo un overflow: hidden - se questa è un'opzione.

Answer 2

sembra che il riquadro di ridimensionamento del proprio browser sia predefinito per gli elementi selezionati. prova a mettere il ridimensionamento della scatola: contenuto-scatola; su select e jquery ti danno il risultato giusto.

Jquery ottiene la larghezza del contenuto con il metodo "larghezza" in modo da eliminare margine, riempimento e bordo. Con il ridimensionamento della casella: border-box, la larghezza indicata prende il padding e il bordo in considerazione.

Ernoriel

Answer 3

in realtà è il confine che sta causando il problema. Imposta la larghezza del bordo su 0 e sarai in grado di vedere 300 px per tutti. In realtà i browser stanno impostando la larghezza dell'elemento a 300 px come ci si aspetta che sia, e aggiungendo i bordi intorno. Per gli elementi visibili è possibile ottenere l'intera larghezza dell'elemento utilizzando offsetWidth (che verrà impostato su 0 se si imposta il display su none.)

Answer 4

Non esiste un modo semplice per accedere al valore specificato in CSS.

Quando si utilizza .css() in jQuery, si ottiene il computed value. Quello che cercate è il specified value.

Quando un valore specificato è calcolato, verrà regolato in base alla situazione (nel proprio violino, bordi). Questo è il motivo per cui la larghezza è diversa. Non so perché la selezione nascosta all'interno di una divisione padre non si adegui ai bordi, però.

Soluzione 1: Forse un modo migliore di ottenere il valore specificato dell'elemento è cercare la larghezza del relativo elemento principale? Vedendo come è una buona pratica non impostare mai larghezze su elementi specifici in ogni caso (ma piuttosto sui loro genitori, come quando si utilizza un sistema a griglia o simili), questo potrebbe essere il tuo approccio. L'utilizzo delle larghezze sui genitori riduce in modo efficace la larghezza massima dei suoi figli.

Soluzione 2: Ora, se davvero si desidera che il valore specificato, suppongo che si possa passare attraverso document.styleSheets e per ogni foglio di stile, accedere alla proprietà cssRules e il tuo lavoro verso il basso fino a quando hai trovato il valore' sto cercando. Quando ho provato questo in Chrome, cssRules sembra essere vuoto, ma Firefox lo popola e elenca in modo obbediente tutti gli stili in ogni foglio di stile allegato alla pagina.

io non lo consiglio, ma se si decide di andare giù quel buco, si può essere interessati a una di queste domande SO:

• Mapping computed CSS styles to specified ones?
• Listing known CSS classes using Javascript

I non è consigliabile modificare lo box-sizing in quanto questo ti darà il valore che stai cercando, ma la larghezza effettiva dell'elemento sarà più ampia (larghezza base 300px + bordi = larghezza 302px).

Se nessuno di questi galleggia la vostra barca, forse è tempo di sedersi e riflettere (e spiegare!) Cosa si vuole fare e perché. Ogni volta che mi ritrovo a voler fare cose non standard per compiti semplici, non è raro perché la mia soluzione forse non è ottimale e ho bisogno di ridurre un po 'prima di procedere.