Установите тонкую границу с помощью.css() в javascript

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

Чтобы настроить обработчик, я собираюсь:

$(".reportButtons").click(function(){ //change border color });

Я попробовал 2 способа изменить цвет границы кнопок там. Первый способ - использовать функцию.css().

$(this).css({"border-color": "#C1E0FF", 
             "border-weight":"1px", 
             "border-style":"solid"});

Но когда я делаю это так, граница действительно жирная (я хочу, чтобы она была волосной, как обычно, если бы я установил ширину 1px)

Другой способ, которым я попытался, - загрузить плагин jquery-color и сделать что-то вроде:

$(this).animate({borderTopColor: "#000000"}, "fast");

Когда я это делаю, ничего не происходит. Нет ошибки - ничего не происходит. Но если вместо того, чтобы пытаться изменить цвет границы, я пытаюсь изменить цвет фона, он отлично работает... так я неправильно использую jquery-color? Для справки, вот как я изменил бы фон:

$(this).animate({ backgroundColor: "#f6f6f6" }, 'fast');

как я уже сказал, это работает. Когда я скачал jquery-color, я загрузил только один файл (jquery-color.js), если это имеет значение....

Итак, как мне добиться границы с волосами? (Я бы предпочел использовать метод animate(), если у вас есть какие-либо действия, чтобы заставить это работать)

Ответ 1

Текущий пример:

Вам необходимо определить border-width:1px

Ваш код должен читать:

$(this).css({"border-color": "#C1E0FF", 
             "border-width":"1px", 
             "border-style":"solid"});

Пример:

В идеале вы должны использовать класс и addClass/removeClass

$(this).addClass('borderClass'); $(this).removeClass('borderClass');

и в вашем CSS:

.borderClass{
  border-color: #C1E0FF;
  border-width:1px;
  border-style: solid;
  /** OR USE INLINE
  border: 1px solid #C1E0FF;
  **/
}

Рабочий пример jsfiddle: http://jsfiddle.net/gorelative/tVbvF/\

jsfiddle with animate: http://jsfiddle.net/gorelative/j9Xxa/ Это просто дает вам пример того, как это может сработать, вы должны получить идею. Есть лучшие способы сделать это, скорее всего,... например, с помощью toggle()

Ответ 2

Может быть, просто "border-width" вместо "border-weight"? Нет "border-weight", и это свойство просто игнорируется, а вместо этого используется ширина по умолчанию.

Ответ 3

Я бы рекомендовал использовать класс вместо установки свойств css. Поэтому вместо этого:

$(this).css({"border-color": "#C1E0FF", 
             "border-width":"1px", 
             "border-style":"solid"});

Определить класс css:

.border 
{ 
  border-color: #C1E0FF; 
  border-width:1px; 
  border-style:solid; 
}

А затем измените свой javascript на:

$(this).addClass("border");

Ответ 4

После нескольких бесполезных часов, сражающихся с сообщением "SyntaxError: missing: after property id", я могу теперь расширить эту тему:

border-width - допустимое свойство css, но оно не включено в определение jQuery css oject, поэтому.css({border-width: '2px'}) вызовет ошибку, но он вполне доволен.css({'border -width ':' 2px '}), предположительно имена свойств в кавычках передаются только как полученные.