Изменение файла css с помощью jquery не работает
Я искал переполнение стека и Интернет, и я просто не могу найти ответ на этот вопрос, по крайней мере, который я не понимаю. С моими ограниченными знаниями по этому вопросу (jquery и java). Итак, в основном я хочу изменить один из классов css (#navbar a) после того, как произойдет какая-то функция.
Я попытался реализовать это в скрипте, который не работал:
$('link[href = "Style.css"]').addClass('#navbar a').css('width', '20px');
Это javascript/jQuery:
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
navbar.style.align = 'auto';
navbar.style.width = '100%';
$('link[href = "Style.css"]').addClass('#navbar a').css('width', '20px');
} else {
navbar.classList.remove("sticky");
navbar.style.width = '80%';
}
}
</script>
Это файл css/файл стиля:
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
width: 25%;
text-decoration: none;
font-size: 35px;
padding: 20px 0px;
}
Это весь html-код:
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width;initial-scale=1;height=device">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel = "stylesheet" href = "Style.css">
</head>
<body style = "background:#101010">
<div class = "header">
<h2>FELLE</h2>
</div>
<div id = "navbar">
<a class = "active" href = "">Hjem</a>
<a href = "Historie.html">Historie</a>
<a href = "Hyttefelt.html">Hyttefelt</a>
<a href = "Annet.html">Annet</a>
</div>
<div class = "container" align = "middle">
<img src = "Bilder/Felle_Butikk.jpg" alt = "Felle butikk"/>
<object data = "Tekster/Felle_Butikk.txt"></object>
<img src = "Bilder/Solhomfjell.jpg" alt = "Solhomfjell i nissedal"/>
<object data = "Tekster/Solhomfjell.txt"></object>
</div>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
navbar.style.align = 'auto';
navbar.style.width = '100%';
$('link[href = "Style.css"]').addClass('#navbar a').css('width', '20px');
} else {
navbar.classList.remove("sticky");
navbar.style.width = '80%';
}
}
</script>
</body>
</html>
Если вы хотите изменить CSS ЭЛЕМЕНТА, используйте $('#navbar a').css('width', '20px')
Возможный дубликат Изменить свойства класса CSS с помощью jQuery
я чувствую себя глупо. Это сработало как шарм @ Carsten Løvbo Andersen, мой плохой. плохо удаляю этот пост, видел, что он также был помечен как дубликат. Извините за мой английский, это не мой родной язык
Ответы 1
$('link[href = "Style.css"]').addClass('#navbar a').css('width', '20px');<link href = "Style.css" rel = "stylesheet">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>У вас есть приведенный выше код, но он не изменяет таблицу стилей. Он изменяет элемент ссылки.
Поскольку элемент изначально не виден, задание ширины не имеет никакого эффекта.
Вы можете изменить атрибуты style фактических элементов (и полностью включить таблицу стилей):
jQuery('#navbar a').css('width', '20px');
Или вы могли бы см. этот вопрос об изменении самих правил CSS.
пожалуйста, добавьте также html-код. Спасибо