Невозможно изменить borderColor of TD - PullRequest
Новая
       10

Невозможно изменить borderColor of TD

1 голос
/ 03 марта 2010

Использование JS для установки цвета фона TD - это нормально. Но установка цвета границы проблематична в FF 3.0.18, хотя IE 6 не испытывает этого. FF проблематичен тем, что требует, чтобы элемент TD имел атрибут style , инициализированный в border-style: solid . Без этого установка цвета границы TD не будет работать. Это известная ошибка?

Как установить цвет границы, не устанавливая атрибут style и значение инициализации?

Мне известен еще один прием настройки атрибута class вместо прямой установки цвета границы. Является ли это признаком того, что TD ненавидит динамически устанавливать цвет границы? Это также известно?

Проблемный код приведен ниже (цель состоит в том, чтобы выяснить, почему установка цвета границы простая истина 1 не работает, в то время как простая истина 3 работает, когда я использую описанный выше прием ): 

<html>
<head>
<title>Quirks FF 3.0.18</title>
<style type="text/css">
table {
    border-collapse: collapse;
}
</style>
<script type="text/javascript">
function changeBgColor()
{
    document.getElementById('simple').style.backgroundColor='yellow';
    document.getElementById('simple2').style.backgroundColor='yellow';
    document.getElementById('simple3').style.backgroundColor='yellow';
}

function quirk(id)
{
    var x = document.getElementById(id);

    x.style.border = '2px solid red';
}
</script>
</head>
<body>
    <input type="button" onclick="changeBgColor()" value="Change background color"/>
    <input type="button" onclick="quirk('simple')" value="Change border color 1"/>
    <input type="button" onclick="quirk('simple2')" value="Change border color 2"/>
    <input type="button" onclick="quirk('simple3')" value="Change border color 3"/>
    <table>
    <tr><td id="simple">Simple truth 1</td></tr>
    </table>
    <table>
    <tr><td><span id="simple2">Simple truth 2</span></td></tr>
    <table>
    <tr><td id="simple3" style="border-style: solid">Simple truth 3</td></tr>
    </table>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 24 марта 2010

это не ошибка, каждый приличный браузер потребует от вас установить все три значения для границы - цвет, стиль (сплошной, пунктирный и т. Д.) И ширину пикселя. если один или несколько атрибутов отсутствуют, результаты могут отличаться.

вам нужно установить все три атрибута в JS для правильного отображения границы. хотя значение инициализации (CSS) не требуется.

более того, вы всегда можете использовать установку атрибутов границы отдельно через border-width, border-style, border-color: http://www.comptechdoc.org/independent/web/cgi/javamanual/javastyle.html

1 голос
/ 24 марта 2010

Я считаю, что это ошибка. Как вы уже указали, обходной путь - установить стиль границы на сплошной. Вы можете добавить его в таблицу стилей, чтобы TD всегда инициализировался:

TD {стиль границы: сплошной; }

...