Проблема с подчеркиванием javaskript

Question

[Shuboanator]

$(window).load(function(){
	$('.fixBlock').liFixar({
		side: 'top',
		position: 0,
		fix: function(el, side){
			el.css({background:'#FFF'}).css({color:'#000'});
			el.liFixar('update')
		},
		unfix: function(el, side){
			el.css({background:'none'}).css({color:'#fff'});
			el.liFixar('update')
		}
	});
})

цвет шрифта изменить получилось, а вот "border-bottom:" изменить не могу. А еще трудность в том, что "border-bottom:" надо заменять в ul.hr li:hover. Кто может помочь с решением?

<div class="fixBlock">
            <div id="menu">
            	<div id="menu1">
                	 <ul class="hr">
                       <li>Мчади</li>
                       <li>Када на мацони</li>
                       <li>Пахлава</li>
                       <li>Кчуч</li>
                       <li>Лилибдж</li>
                     </ul>
                </div>
            </div>

Answer 1

[Евгений Петров]

Не нужно ничего красить и подчёркивать в скриптах — для этого есть смена классов.

Если же речь про динамическое создание правил CSS, то и здесь не нужно ничего делать с помощью css(). Нужно создавать их грамотно через коллекцию Stylesheets.

Answer 2

[Сергей Мельников]

задавать стили js - это говнокод, за такое по рукам сильно бьют. Все стили должны быть в css! при помощи js меняем только классы

Answer 3

[Владислав Килин]

$(window).load(function(){
	$('.fixBlock').liFixar({
		side: 'top',
		position: 0,
		fix: function(el, side){
			el.addClass("fixed");
			el.liFixar('update')
		},
		unfix: function(el, side){
			el.removeClass("fixed");
			el.liFixar('update')
		}
	});
})

.hr li {
    background: #FFF;
    color: #000;
}
.hr .fixed {
    background: none;
    color: #fff;
}
.hr .fixed:hover {
    border-bottom: 1px solid #aa5;
}

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

Answer 4

[Юрий Лобанов]

Наверное пишете border-bottom, а в данном случае надо писать borderBottom.
Или пишите в кавычках, ниже пример:

.css({ "border-bottom": "5px solid #ccc" }) 
и
.css({borderBottom: "5px solid #ccc" }).

Comments

[Илья Лесных]

По-моему, конкретно в jQuery можно писать и так, и так. Ну а про нативный js - да, вы правы!

[Юрий Лобанов]

@Aliance не совсем так, но и мне следовало сказать про кавычки. См., исправил ответ.