Thay đổi thuộc tính CSS khi nhấp vào

Tôi đang cố thay đổi CSS của một phần tử khi nhấp vào một phần tử khác. Tôi đã tìm kiếm rất nhiều nhưng không có gì hoạt động hoàn hảo. Hiện tại tôi đang sử dụng mã bên dưới, nhưng nó không hoạt động. Bất cứ ai có thể cho tôi biết những gì tôi bị mất?Thay đổi thuộc tính CSS khi nhấp vào

<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'; 
}

Nguồn

2013-01-14 mobi001

Tại sao bạn không chỉ thiết lập lớp mới và có kiểu trong biểu định kiểu? – epascarello

Bạn đang thử nghiệm trình duyệt nào? Có lỗi trong bảng điều khiển JS không? – epascarello

Sử dụng jQuery :), nó dễ dàng hơn –

Thứ nhất, sử dụng thuộc tính on* thêm xử lý sự kiện là một cách rất lạc hậu của việc đạt được những gì bạn muốn. Như bạn đã gắn thẻ câu hỏi của bạn với jQuery, đây là một thực hiện 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' 
    }); 
});

Một phương pháp hiệu quả hơn là đặt những phong cách vào một lớp học, và sau đó thêm lớp đó onclick, như thế này:

$('#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" />

Nguồn

2013-01-14 13:28:46

tại sao không hoạt động trên firefox? – Sickest

@ Nhỏ nhất không có lý do gì sẽ không hoạt động trong Firefox. Nếu bạn gặp vấn đề, tôi khuyên bạn nên mở một câu hỏi mới. –

lol 9 tháng sau đó. Cảm ơn các cập nhật. – Sickest

<div id="foo">hello world!</div> 
<img src="zoom.png" id="click_me" />

$('#click_me').click(function(){ 
    $('#foo').css({ 
    'background-color':'red', 
    'color':'white', 
    'font-size':'44px' 
    }); 
});

Nguồn

2013-01-14 13:29:02

Với jquery bạn có thể làm điều đó thích:

$('img').click(function(){ 
    $('#foo').css('background-color', 'red').css('color', 'white'); 
});

này áp dụng cho tất cả img thẻ bạn nên thiết lập một thuộc tính id cho nó như image và sau đó:

$('#image').click(function(){ 
    $('#foo').css('background-color', 'red').css('color', 'white'); 
});

Nguồn

2013-01-14 13:29:15

Hãy thử điều này :

$('#foo').css({backgroundColor:'red', color:'white',fontSize:'44px'});

Nguồn

2013-01-14 13:29:53

Hãy thử điều này:

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"); 
}

Nguồn

2013-01-14 13:31:31 ATOzTOA

Trong mã của bạn, bạn không sử dụng jquery, vì vậy, nếu bạn muốn sử dụng nó, yo cần một cái gì đó giống như ...

$('#foo').css({'background-color' : 'red', 'color' : 'white', 'font-size' : '44px'});

http://api.jquery.com/css/

cách khác, nếu bạn không sử dụng jquery, bạn cần phải làm ...

document.getElementById('foo').style = 'background-color: red; color: white; font-size: 44px';

Nguồn

2013-01-14 13:33:42 Elwi

Mã này có vẻ hoạt động tốt (xem này jsfiddle). Javascript của bạn đã được xác định là trước cơ thể của bạn chưa? Khi trình duyệt đọc số onclick="myFunction()", nó phải biết số myFunction là gì.

Nguồn

2013-01-14 13:35:42 rmhartog

<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>

Nguồn

2015-10-05 09:27:00

Đây là câu trả lời hay nhất và đơn giản nhất – Sonevol

Thay đổi thuộc tính CSS khi nhấp vào

Trả lời

Các vấn đề liên quan