Изменение свойств CSS при нажатии
Я пытаюсь изменить CSS одного элемента при щелчке другого элемента. Я много искал, но ничего не работает. В настоящее время я использую приведенный ниже код, но он не работает. Может ли кто-нибудь сказать мне, что я пропустил?
<div id="foo">hello world!</div>
<img src="zoom.png" onclick="myFunction()" />
function myFunction() {
document.getElementById('foo').style.cssText = 'background-color: red; color: white; font-size: 44px';
}
Ответы
Ответ 1
Во-первых, использование атрибутов on*
для добавления обработчиков событий - это очень устаревший способ достижения того, что вы хотите. Поскольку вы отметили свой вопрос с помощью jQuery, здесь реализована реализация jQuery:
<div id="foo">hello world!</div>
<img src="zoom.png" id="image" />
$('#image').click(function() {
$('#foo').css({
'background-color': 'red',
'color': 'white',
'font-size': '44px'
});
});
Более эффективный метод состоит в том, чтобы поместить эти стили в класс, а затем добавить этот класс onclick, например:
$('#image').click(function() {
$('#foo').addClass('myClass');
});
.myClass {
background-color: red;
color: white;
font-size: 44px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="foo">hello world!</div>
<img src="https://i.imgur.com/9zbkKVz.png?1" id="image" />
Ответ 2
Попробуйте следующее:
CSS
.style1{
background-color:red;
color:white;
font-size:44px;
}
HTML
<div id="foo">hello world!</div>
<img src="zoom.png" onclick="myFunction()" />
Javascript
function myFunction()
{
document.getElementById('foo').setAttribute("class", "style1");
}
Ответ 3
<script>
function change_css(){
document.getElementById('result').style.cssText = 'padding:20px; background-color:#b2b2ff; color:#0c0800; border:1px solid #0c0800; font-size:22px;';
}
</script>
</head>
<body>
<center>
<div id="error"></div>
<center>
<div id="result"><h2> Javascript Example On click Change Css style</h2></div>
<button onclick="change_css();">Check</button><br />
</center>
</center>
</body>
Ответ 4
С помощью jquery вы можете сделать это как:
$('img').click(function(){
$('#foo').css('background-color', 'red').css('color', 'white');
});
это применимо для всех тегов img
, вы должны установить для него атрибут id
как image
, а затем:
$('#image').click(function(){
$('#foo').css('background-color', 'red').css('color', 'white');
});
Ответ 5
В вашем коде вы не используете jquery, поэтому, если вы хотите его использовать, вам нужно что-то вроде...
$('#foo').css({'background-color' : 'red', 'color' : 'white', 'font-size' : '44px'});
http://api.jquery.com/css/
Другим способом, если вы не используете jquery, вам нужно сделать...
document.getElementById('foo').style = 'background-color: red; color: white; font-size: 44px';
Ответ 6
<div id="foo">hello world!</div>
<img src="zoom.png" id="click_me" />
JS
$('#click_me').click(function(){
$('#foo').css({
'background-color':'red',
'color':'white',
'font-size':'44px'
});
});
Ответ 7
Попробуйте следующее:
$('#foo').css({backgroundColor:'red', color:'white',fontSize:'44px'});
Ответ 8
Этот код работает нормально (см. jsfiddle). Является ли ваш javascript определенным перед вашим телом?
Когда браузер читает onclick="myFunction()"
, он должен знать, что такое myFunction
.