Cách thay đổi giá trị nội dung của giả: trước phần tử bằng Javascript

Question

Tôi có grap được xây dựng bởi CSS, thay đổi động bởi JS. Tôi hiển thị giá trị tối đa của đồ thị theo phần tử giả là:

.graph:before { 
    content:""; //value that want set by JS 
    position:absolute; 
    top:0; 
    left:0; 
} 

Đó là lý do tại sao tôi cần đặt giá trị này bằng JS. Tôi đã thử $(".graph:before").css("content", hh); nhưng không hiệu quả. Làm thế nào để có được giá trị đó?

Answer 1

Bạn không thể sửa đổi các phần tử giả thông qua JavaScript vì chúng không phải là một phần của DOM. Đặt cược tốt nhất của bạn là xác định một lớp khác trong CSS của bạn với các kiểu bạn yêu cầu và sau đó thêm nó vào phần tử. Vì điều đó dường như không thể thực hiện được từ câu hỏi của bạn, có lẽ bạn cần xem xét sử dụng một phần tử DOM thực thay vì một phần tử giả.

Answer 2

Những người vẫn đang tìm kiếm một số giải pháp của cùng một vấn đề, nó là doable như sau sử dụng jQuery:

<button id="changeBefore">Change</button> 
<script> 
    var newValue = '22';//coming from somewhere 
    var add = '<style>.graph:before{content:"'+newValue+'"!important;}</style>'; 
    $('#changeBefore').click(function(){ 
     $('body').append(add); 
    }); 
</script> 

Ví dụ này minh họa rằng vào nút nhấn: changeBefore, giá trị cho .graph:before sẽ thay đổi theo động mới giá trị sắp tới cho nó.

Đối với mô tả thêm về thay đổi của :before hoặc :after phong cách yếu tố hoặc nhận được nội dung của nó:

Cho phép giả HTML của bạn là như thế này:

<div id="something">Test</div> 

Và sau đó bạn đang thiết lập của nó: trước trong CSS và thiết kế nó như:

#something:before{ 
    content:"1st"; 
    font-size:20px; 
    color:red; 
} 
#something{ 
    content:'1st'; 
} 

Xin lưu ý rằng tôi cũng đặt thuộc tính content trong phần tử sau này bạn có thể dễ dàng lấy nó ra. Bây giờ, hãy nhấp vào đó, bạn muốn thay đổi màu của: trước màu xanh lá cây và kích thước phông chữ là 30px. Bạn có thể đạt được điều đó như sau:

Xác định một css với phong cách cần thiết của bạn trên một số lớp .activeS:

.activeS:before{ 
    color:green !important; 
    font-size:30px !important; 
} 

Bây giờ bạn có thể thay đổi: trước phong cách bằng cách thêm các lớp của bạn: trước khi yếu tố như sau:

<button id="changeBefore">Change</button> 
<script> 
    $('#changeBefore').click(function(){ 
     $('#something').addClass('activeS'); 
    }); 
</script> 

Nếu bạn chỉ muốn để có được nội dung của :before, nó có thể được thực hiện như:

<button id="getContent">Get Content</button> 
<script> 
    $('#getContent').click(function(){ 
     console.log($('#something').css('content'));//will print '1st' 
    }); 
</script> 

Tôi hy vọng nó giúp

Answer 3

Tôi hy vọng đoạn dưới đây có thể giúp đỡ, bạn có thể chỉ định giá trị content bạn muốn qua JS sử dụng chức năng CSS attr().

JavaScript:

$('.graph').on('click', function() { 
    //do something with the callback 
    $(this).attr('data-before','anything'); //anything is the 'content' value 
}); 

CSS:

.graph:before { 
    content: attr(data-before); //value that that refers to CSS 'content' 
    position:absolute; 
    top: 0; 
    left: 0; 
} 

Answer 4

Tôi tin rằng có một giải pháp đơn giản bằng cách sử dụng attr() chức năng để xác định nội dung của phần tử giả.Dưới đây là một ví dụ làm việc bằng cách sử dụng 'tiêu đề' thuộc tính, nhưng nó cũng sẽ làm việc với thuộc tính tuỳ chỉnh .:

document.getElementById('btn_change1').addEventListener("click", function(){ 
 
    document.getElementById('test_div').title='Status 1'; 
 
}); 
 
    
 
document.getElementById('btn_change2').addEventListener("click", function(){  
 
    document.getElementById('test_div').title='Status 2'; 
 
});

#test_div { 
 
    margin: 4em; 
 
    padding:2em; 
 
    background: blue; 
 
    color: yellow; 
 
} 
 

 
#test_div:after { 
 
    content:attr(title); 
 
    background: red; 
 
    padding:1em; 
 
}

<button id='btn_change1'>Change div:after to [Status 1]</button> 
 
<button id='btn_change2'>Change div:after to [Status 2]</button> 
 

 
<div id='test_div' title='Initial Status'>The element to modify</div>