Удаление атрибута `border` из таблицы не удаляет границу

Почему при выполнении removeAttr("border") граница не удаляется (атрибут удаляется, но стиль остается)?

Demo

$("#button1").on("click", function() {
  $("table").removeAttr("border");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tbody>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
  </tbody>
</table>

<table>
  <tbody>
    <tr>
      <td>Not</td>
      <td>Initially</td>
      <td>Bordered</td>
    </tr>
  </tbody>
</table>

<input type="button" id="button1" value="Click to remove border via JavaScript">

Ответы

Ответ 1

Это не только атрибут border для самого элемента, о котором вы должны беспокоиться.

В каждом браузере имеется "таблица стилей по умолчанию", которая будет настраивать базовую презентацию для обычных HTML-элементов. Таблицы - один из тех элементов, которые должны иметь стиль, установленный сайтом, чтобы переопределить этот "базовый стиль" из браузера. Браузеры реализуют это, чтобы улучшить читаемость по умолчанию на веб-сайтах, но также вводит устройство, о котором должны знать веб-разработчики при создании собственных таблиц стилей.

Установка следующих правил:

table {
  border: none;
  border-spacing: 0;
  border-collapse: collapse;
}

Решите эту проблему для вас.

jQuery может удалить атрибут, но он не будет вызывать перерисовку элемента при его удалении, а не обновленном. Так как в CSS по умолчанию отсутствует элемент стиля, исходный стиль сохраняется.

После установки атрибута вы всегда можете клонировать и повторно применять (или просто повторно вставлять элемент с помощью чего-то глупого, как $('table').appendTo($('table').parent());, чтобы увидеть желаемое поведение.

Изменить:

Поздравляем, вы обнаружили ошибку Chrome

Средство визуализации CSS по-прежнему соблюдает атрибут border даже после его удаления. Этого не должно быть. Другие браузеры при запуске скрипта, содержащиеся в комментариях, соответствующим образом удаляют границу элемента.

Однако! в Chrome вы заметите, что эта маленькая присоска висит на вашем столе с заданным атрибутом border:

note the table[Attributes Style]

Обратите внимание на table[Attributes Style] пустой селектор здесь

Chrome создает эту таблицу так, как если бы она была написана таким образом в вашем HTML: <table border></table>, несмотря на то, что не отражает информацию в DOM.

Обязательно отправьте это на Список хромовых проблем

Отметьте комментарий Ismael Miguel ниже для дальнейшего объяснения, скопированного здесь

Я могу подумать, что у Chrome есть ошибка, связанная с обработкой атрибута границы (который устарел, не поддерживается в html5). Это может произойти из-за того, что атрибут border не связан с стиль CSS. Одним из примеров является свойство value. Когда вы запускаете element.value = 5;, атрибут value останется прежним, но когда вы поместите value = "6", запустив элемент element.value 6. Это связь может быть нарушена: с атрибутом border он устанавливает цвет И размер рамки. Когда вы удаляете атрибут, он удаляет размер.

Congrats!

Ответ 2

Вы должны использовать

.attr("border", "")

Вот пример jsFiddle

Ответ 3

Таблицы имеют границы по умолчанию в некоторых браузерах, поэтому вы можете установить границу на 0.

Ответ 4

$("table").attr("border", "0");

выполнит трюк