| | У вас неправильные представления о значениях бордера текстового поля по умолчанию и о способе восстановления изначального значения.
Во-первых, у бордера имеется 3 (три) изменяемых параметра - borderStyle, borderWidth и borderColor.
Вы почему-то, когда изменяете всего один параметр (borderColor), "вернуть" к изначальному стараетесь зачем-то не только тот, который изменили, а вообще ВСЕ. Причём делаете это неверно. Вы меняете borderStyle и borderColor, а вместо borderWidth неверно используете border.
Вполне достаточно "возвращать" к умолчанию только то, что изменили.
Во-вторых, значения borderColor, который вы изменяете, по умолчанию в разных браузерах разные. В FireFox цвет бордера текстового поля по умолчанию rgb(192, 192, 192) (или в HEX-виде #c0c0c0), а в MSIE - #000000.
Во-третьих, как раз со значением borderColor, который вы изменяете, в браузере MSIE имеется некая хитрость, коя вам, как я вижу, неизвестна. А именно: если узнать у браузера MSIE текущее значение свойства borderColor, то браузер ответит #000000, но фактически цвет у бордера имеет совершенно иное значение (какое именно - я не знаю, но много ближе к белому, чем к чёрному. Мои попытки подставить вместо значения цвета бордера внутренние наименования - User Interface Color Names - светлых тонов не привели нужному результату. А подставлял я и ButtonHighlight, и CaptionText, и HighlightText, и ThreeDHighlight, и Window... всё не то).
В-четвертых, стиль бордера текстового поля по умолчанию во всех браузерах таки одинаков, но не none, как пишете вы, а inset.
Ну и наконец, в-пятых, способ вернуть цвет бордера к цвету по умолчанию имеется. Он прост. И он одинаков во всех браузерах. Надо просто поставить в значении цвета пустую строку, что вернет цвет бордера в начальное состояние.
Ну и код, который вы можете запустить в разных браузерах и в результате увидите своими глазами то, о чём я выше написал:
<html>
<head>
<script>
onload = function ()
{
var br = (navigator.userAgent.indexOf ('MSIE') > 0) ? 1 : 0;
OBJ = document.getElementById ('in');
var stl = (br) ? obj.currentStyle.borderLeftStyle : document.defaultView.getComputedStyle (obj, null).getPropertyValue ('border-left-style');
var col = (br) ? obj.currentStyle.borderLeftColor : document.defaultView.getComputedStyle (obj, null).getPropertyValue ('border-left-color');
var wid = (br) ? obj.currentStyle.borderLeftWidth : document.defaultView.getComputedStyle (obj, null).getPropertyValue ('border-left-width');
var t = '<caption>Default properties:</caption><table border="1" cellpadding="5"><tr><td>border-style<td>' + stl;
t += '<tr><td>border-color<td>' + col;
t += '<tr><td>border-width<td>' + wid;
document.getElementById ('df').innerHTML = t + '</table>';
}
function ChangeBorder (x)
{
OBJ.style.borderColor = (x.value == 'Red') ? 'red' : '';
x.value = (x.value == 'Red') ? 'Default' : 'Red';
}
</script></head>
<body>
<input id="in">
<hr>
<div id="df"></div>
<hr>
<input type="button" style="width: 200px" value="Red" onclick="ChangeBorder (this)">
</body>
</html>
|
| |
