Javascript właściwości obrazu

Byłem lała mojego kodu w kółko i po prostu nie mogę zrozumieć, dlaczego to nie działa poprawnie ...Javascript właściwości obrazu

Może mi ktoś oświecić? O co tu chodzi? Po prostu tego nie widzę.

Kod powinien umożliwiać użytkownikowi wprowadzanie różnych wartości do pól tekstowych w celu zmiany niektórych funkcji obrazu, takich jak rozmiar ramki, kolor, szerokość, wysokość, tekst alternatywny obrazu i tytuł obrazu.

To jest mój kod:

<html> 
<head> 
<title>Image Properties</title> 
<script type="text.javascript"> 
function changeImage() { 
    //applies a new border size 
    document.getElementById('img').border = document.getElementById('bs').value; 
    //applies a new border color 
    document.getElementById('img').style.borderColor = document.getElementById('bc').value; 
    //applies a new width 
    document.getElementById('img').width = document.getElementById('bw').value; 
    //applies a new height 
    document.getElementById('img').height = document.getElementById('bh').value; 
    //applies a new alt tag 
    document.getElementById('img').alt = document.getElementById('ba').value; 
    //applies a new title 
    document.getElementById('img').title = document.getElementById('bt').value; 
} 
</script> 
</head> 
<body> 
<h2>Change Image Properties</h2> 
<img src="KotakuLogo.jpg" id="img" /> 
<p> 
Border Size:<input type="text" id="bs" 
onfocus="this.style.background='#c3c3c3'" 
onblur="this.style.background='#FFFFFF'"/><br /> 
New Border Color:<input type="text" id="bc" 
onfocus="this.style.background='#c3c3c3'" 
onblur="this.style.background='#FFFFFF'"/><br /> 
New Border Width:<input type="text" id="bw" 
onfocus="this.style.background='#c3c3c3'" 
onblur="this.style.background='#FFFFFF'"/><br /> 
New Border Height:<input type="text" id="bh" 
onfocus="this.style.background='#c3c3c3'" 
onblur="this.style.background='#FFFFFF'"/><br /> 
New Border Alt Tag:<input type="text" id="ba" 
onfocus="this.style.background='#c3c3c3'" 
onblur="this.style.background='#FFFFFF'"/><br /> 
New Border Title:<input type="text" id="bt" 
onfocus="this.style.background='#c3c3c3'" 
onblur="this.style.background='#FFFFFF'"/><br /> 
<input type="button" value="Submit Image Changes" onclick="changeImage()" /> 
</body> 
</html>

Źródło

2015-04-23 Morgander

Problemem jest to, że skrypt nie jest interpretowane, ponieważ można umieścić go w skrypcie z niewłaściwego typu:

<script type="text.javascript">...</script>

zmienić go skorygować text/javascript i to zadziała. Albo jeszcze lepiej: usuń atrybut type jako nadmiarowy, tekst/javascript jest domyślnym typem.

I wreszcie, zamiast onfocus="this.style.background='#c3c3c3'" onblur="this.style.background='#FFFFFF'" użyć CSS:

input:focus { 
    background: #c3c3c3; 
}

Źródło

2015-04-23 20:40:54 dfsq

ha ha ha .. możesz dodać to w komentarzu. – Mimouni

@ Ilyas Minmouni, ale jego reputacja jest na linii! : P –

darmowych punktów! : D –

Przede wszystkim document.getElementById zajmuje trochę czasu, aby uruchomić, więc należy zapisać swój wynik zamiast nazywając ją dziesięć razy.

var elem = document.getElementById('img'); 
elem.something = "example"; 
elem.somethingElse = 1234;

border jest deprecated na obrazie. Zamiast tego należy bezpośrednio wpływać na styl elementu. Właściwość CSS border obejmuje wszystkie style naraz i musi być zapisana jako SIZEunit style color, na przykład 5px solid black.

elem.style.border = document.getElementById('bs').value + "px solid " + document.getElementById('bc').value;

Źródło

2015-04-23 20:49:10

Javascript właściwości obrazu

Odpowiedz

Powiązane problemy