Hướng dẫn onclick css change - onclick css thay đổi

17

Nội dung chính ShowShow

• Làm cách nào để thay đổi màu nhấp chuột của tôi?
• Làm cách nào để thay đổi màu nền khi tôi nhấp vào nút?
• Làm cách nào để thay đổi màu của nút nhấp vào CSS?
• Làm thế nào để bạn tạo kiểu cho một nút trong JavaScript?

Nội dung chính

• Làm cách nào để thay đổi màu nhấp chuột của tôi?
• Làm cách nào để thay đổi màu nền khi tôi nhấp vào nút?
• Làm cách nào để thay đổi màu của nút nhấp vào CSS?
• Làm thế nào để bạn tạo kiểu cho một nút trong JavaScript?

Nội dung chính
Learn more.

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.Learn more.Learn more.

Tôi muốn

1 của tôi thay đổi màu sắc mỗi khi tôi nhấp vào nó. Nhưng nó chỉ thay đổi màu sắc trên nhấp chuột đầu tiên.

Tôi tin rằng vấn đề là trong hàm

2. Mỗi lần tôi nhấp vào

1,

1 sẽ được đặt thành 1. Vì vậy, ngay cả khi tôi đặt nó thành 0, nó sẽ được đặt lại thành 1 trong lần nhấp tiếp theo. Làm cách nào để khắc phục điều này? Có các biến toàn cầu trong JavaScript/HTML nơi điều này sẽ dễ dàng được giải quyết?

Nov 14, 2014 at 19:26

user2456977user2456977user2456977user2456977user2456977

Đã hỏi ngày 14 tháng 11 năm 2014 lúc 19:26Nov 14, 2014 at 19:26Nov 14, 2014 at 19:2613 gold badges45 silver badges86 bronze badges

1

3.66613 Huy hiệu vàng45 Huy hiệu bạc86 Huy hiệu Đồng13 gold badges45 silver badges86 bronze badges13 gold badges45 silver badges86 bronze badges

Thực sự có các biến toàn cầu trong JavaScript. Bạn có thể tìm hiểu thêm về phạm vi, rất hữu ích trong tình huống này.

Mã của bạn có thể trông như thế này:

Hi vọng điêu nay co ich.Nov 14, 2014 at 19:35

0

1.

function setColor(e) {
  var target = e.target,
      count = +target.dataset.count;

   target.style.backgroundColor = count === 1 ? "#7FFF00" : '#FFFFFF';
   target.dataset.count = count === 1 ? 0 : 1;
   /* 

   () : ? - this is conditional (ternary) operator - equals 

   if (count === 1) {
      target.style.backgroundColor = "#7FFF00";
      target.dataset.count = 0;
   } else {
      target.style.backgroundColor = "#FFFFFF";
      target.dataset.count = 1;
   } 
   target.dataset - return all "data attributes" for current element, 
   in the form of object, 
   and you don't need use global variable in order to save the state 0 or 1
  */ 
}

2.

function setColor(e) {
   var target = e.target,
       status = e.target.classList.contains('active');

   e.target.classList.add(status ? 'inactive' : 'active');
   e.target.classList.remove(status ? 'active' : 'inactive'); 
}

.active {
  background-color: #7FFF00;  
}

.inactive {
  background-color: #FFFFFF;
}

Đã trả lời ngày 14 tháng 11 năm 2014 lúc 19:35Nov 14, 2014 at 19:35Nov 14, 2014 at 19:35

0

1

([Toán tử có điều kiện (ternary)])Nov 14, 2014 at 19:36

Đã trả lời ngày 14 tháng 11 năm 2014 lúc 19:36Nov 14, 2014 at 19:36Nov 14, 2014 at 19:36Oleksandr T.

Oleksandr T.oleksandr T.Oleksandr T.Oleksandr T.17 gold badges166 silver badges143 bronze badges

0

74,8K17 Huy hiệu vàng166 Huy hiệu bạc143 Huy hiệu đồng17 gold badges166 silver badges143 bronze badges17 gold badges166 silver badges143 bronze badges

Mỗi khi

2 bị truy cập, bạn đang cài đặt Count = 1. Bạn sẽ cần xác định

1 ngoài phạm vi của hàm. Thí dụ:

var count=1;
function setColor(btn, color){
    var property = document.getElementById(btn);
    if (count == 0){
        property.style.backgroundColor = "#FFFFFF"
        count=1;        
    }
    else{
        property.style.backgroundColor = "#7FFF00"
        count=0;
    }

}

Nov 14, 2014 at 19:30

Đã trả lời ngày 14 tháng 11 năm 2014 lúc 19:30Nov 14, 2014 at 19:30Nov 14, 2014 at 19:30KJ Price

KJ Pricekj GiáKJ PriceKJ Price3 gold badges20 silver badges33 bronze badges

0

5.6943 Huy hiệu vàng20 Huy hiệu bạc33 Huy hiệu Đồng3 gold badges20 silver badges33 bronze badges3 gold badges20 silver badges33 bronze badges

$("clickme").on('çlick', function(){

  **$(this).css('background-color', 'grey');
.......

Sử dụng jQuery, hãy thử điều này. Nếu id nút của bạn là ID = clickMeJul 9, 2020 at 14:50

Làm cách nào để thay đổi màu nhấp chuột của tôi?

Đã trả lời ngày 9 tháng 7 năm 2020 lúc 14:50Jul 9, 2020 at 14:50Jul 9, 2020 at 14:50.

Để thay đổi màu nền của một phần tử trên nhấp chuột:...

Thêm trình nghe sự kiện nhấp vào phần tử ..

Gán đối tượng sự kiện cho một biến trong hàm ..

Làm cách nào để thay đổi màu nền khi tôi nhấp vào nút?

Đặt sự kiện. Mục tiêu. Phong cách. thuộc tính boardpresscolor cho màu nền cụ thể .. to change the background color after clicking the button. This property is used to set the background-color of an element. Example: This example changes the background color with the help of JavaScript. after clicking the button ?

Làm cách nào để thay đổi màu của nút nhấp vào CSS?

Sử dụng thuộc tính HTML DOM Style BackgroundColor để thay đổi màu nền sau khi nhấp vào nút.Thuộc tính này được sử dụng để đặt màu nền của một phần tử.Ví dụ: Ví dụ này thay đổi màu nền với sự trợ giúp của JavaScript.Sau khi nhấp vào nút? to change the background color after clicking the button. This property is used to set the background-color of an element. Example: This example changes the background color with the help of JavaScript. after clicking the button ? to change the background color after clicking the button. This property is used to set the background-color of an element. Example: This example changes the background color with the help of JavaScript. after clicking the button ?use the CSS background-color property and give it a value of a color of your taste. In the .button selector, you use background-color:#0a0a23; to change the background color of the button.

Làm thế nào để bạn tạo kiểu cho một nút trong JavaScript?

Nội dung chính

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.Learn more.Learn more.

Tôi muốn

1 của tôi thay đổi màu sắc mỗi khi tôi nhấp vào nó. Nhưng nó chỉ thay đổi màu sắc trên nhấp chuột đầu tiên.

Tôi tin rằng vấn đề là trong hàm

2. Mỗi lần tôi nhấp vào

1,

1 sẽ được đặt thành 1. Vì vậy, ngay cả khi tôi đặt nó thành 0, nó sẽ được đặt lại thành 1 trong lần nhấp tiếp theo. Làm cách nào để khắc phục điều này? Có các biến toàn cầu trong JavaScript/HTML nơi điều này sẽ dễ dàng được giải quyết?

Đã hỏi ngày 14 tháng 11 năm 2014 lúc 19:26Nov 14, 2014 at 19:26Nov 14, 2014 at 19:26

Thực sự có các biến toàn cầu trong JavaScript. Bạn có thể tìm hiểu thêm về phạm vi, rất hữu ích trong tình huống này.

Mã của bạn có thể trông như thế này: