CSS nie może być zastosowana do elementu formularza poprzez javascript, jeśli jest ustawiona doctype

Question

mam pole tekstowe tak:

<input id="patId1" type="text" name="patId1" value=""> 

gdy strona ładuje skrypt nazywa który ustawia szerokość pola tekstowego. Ten kod jest następujący:

document.getElementById("patId1").style.width = document.getElementById("patId2").offsetWidth; 

gdzie, patId2 jest listą rozwijaną (wybierz znacznik). Zasadniczo próbuję ustawić szerokość pola tekstowego tak samo jak szerokość listy rozwijanej.

Teraz, jeśli ustawiono DOCTYPE, powyższy skrypt nie działa. Ale jeśli nie zostanie ustawione, szerokość zostanie zastosowana.

Każda pomoc.

Answer 1

Wartość offsetWidth będzie liczbą. Właściwość CSS width akceptuje długość długości. Długości (inne niż 0) muszą mieć jednostki. W trybie dziwactwa przeglądarki naruszają specyfikację CSS i przyjmują jednostki px.

document.getElementById("patId1").style.width = document.getElementById("patId2").offsetWidth + 'px' 

Answer 2

Dołącz "px" do przesunięcia Szerokość listy rozwijanej. JSFiddle: http://jsfiddle.net/whizkid747/ysj2t/1/: document.getElementById("patId1").style.width = document.getElementById("patId2").offsetWidth + "px";

Answer 3

Jest prostszy sposób to zrobić, a ja ponownie przeznaczona kod z poniższego postu @cychan:

Link:

How to expand 'select' option width after the user wants to select an option

Oto ogólne podejście:

<div id="select-wrapper-01" style="width: 180px; overflow: hidden;"> 
    <select style="width: auto;" name="abc" id="10"> 
     <option value="-1">Any</option> 
     <option value="123">123</option> 
    </select> 
</div> 

Teraz możesz mówić: "Zaczekaj chwilę? Moja największa wybierz opcję Nie 180px jest szeroka „

W takim przypadku należy usunąć styl width i overflow atrybutów z div

Następnie za pomocą javascript, aby zapewnić odpowiednią szerokość do otaczającego div, coś jak:.

var actualWidth = document.getElementById("patId2").offsetWidth; 
document.getElementById("select-wrapper-01").style.width = actualWidth + 'px'; 

Oto kopia robocza na jsfiddle. Nic wyszukanego, ale działa.

http://jsfiddle.net/acegyver/eTEuk/

Można spróbować gry z wybranych option s, uczynić je dłużej lub krócej, i zobaczyć, jak select dostosuje się dynamicznie.

Podaj kredyt, w którym należy się kredyt: Jak już powiedziałem, poprawiłem kod z istniejącego wpisu @cychan. Implementacja, która działa na twoje pytanie, jest przeze mnie.