Làm thế nào để kịch bản của tôi có thể thay đổi một Phông chữ Cụ thể (cho một lớp cụ thể)?

Tôi đang cố tạo kịch bản Tampermonkey của riêng mình để thay đổi kiểu phông chữ cụ thể trên một trang cụ thể từ kiểu chữ thảo thành kiểu sans-serif.Làm thế nào để kịch bản của tôi có thể thay đổi một Phông chữ Cụ thể (cho một lớp cụ thể)?

HTML từ trang web này là:

<div class="text">Ask more leading questions</div>

này được lồng trong 2 id và một lớp khác.

Các kịch bản tôi đang làm việc trên là dựa tắt của một vài ví dụ tôi đã cố gắng để làm theo:

// ==UserScript== 
// @name  Change annoying fonts 
// @namespace http://use.i.E.your.homepage/ 
// @version 0.1 
// @description change annoying FaracoHandRegular font to a more readable one 
// @match  https://apps.bloomboard.com/* 
// @copyright 2012+, You 
// ==/UserScript== 

function addCss(cssString) { 
var head = document.getElementsByClassName('text')[0]; 
var newCss = document.createElement('style'); 
newCss.type = "text/css"; 
newCss.innerHTML = cssString; 
head.appendChild(newCss); 
} 

addCss ( 
'* { font-family: Helvetica, sans-serif ! important; }' 
);

Nhưng nó không hoạt động.

Tôi chưa bao giờ tạo tập lệnh của riêng mình cho Greasemonkey hoặc Tampermonkey trước đây. Làm cách nào để thay đổi phông chữ này?

Nguồn

2013-02-27 techkilljoy

Câu hỏi hoặc vấn đề là gì? – matts

Một số điều:

Trước hết, cho những thay đổi CSS đơn giản sử dụng Stylish. Nó nhanh hơn và đơn giản hơn.

Trong trường hợp này, kịch bản Stylish tương đương sẽ là:

@namespace url(http://www.w3.org/1999/xhtml); 

@-moz-document domain("apps.bloomboard.com") { 
    .text { 
     font-family: Helvetica, sans-serif !important; 
    } 
}

hoặc có thể là:

@namespace url(http://www.w3.org/1999/xhtml); 

@-moz-document domain("apps.bloomboard.com") { 
    * { 
     font-family: Helvetica, sans-serif !important; 
    } 
}

mặc dù đặt một kiểu phổ biến với * nên được thực hiện một cách tiết kiệm.

Đừng phát minh lại bánh xe. Hầu hết các công cụ của người dùng đều hỗ trợ GM_addStyle(). Dùng nó. Kịch bản của bạn sẽ trở thành:

// ==UserScript== 
// @name  Change annoying fonts 
// @namespace http://use.i.E.your.homepage/ 
// @version 0.1 
// @description change annoying FaracoHandRegular font to a more readable one 
// @match  https://apps.bloomboard.com/* 
// @copyright 2012+, You 
// @grant  GM_addStyle 
// ==/UserScript== 

GM_addStyle ("           \ 
    .text {            \ 
     font-family: Helvetica, sans-serif !important; \ 
    }              \ 
");

Xem và đọc thêm:

Nguồn

2013-02-28 02:27:32

Brock, cảm ơn. Phong cách dường như có ý nghĩa trong trường hợp này như là một sửa chữa nhanh chóng. Tôi thích tùy chọn addStyle vì tôi có thể đặt nó cho trang web cụ thể. Tuyệt vời của nó để có sự lựa chọn! – techkilljoy

Tôi không đồng ý rằng phong cách có thể là lựa chọn tốt hơn cho trường hợp sử dụng cụ thể của OP. Điều đó nói rằng, có thể có các tình huống khác khi sử dụng một bản ghi người dùng rất hữu ích.

Vấn đề với người dùng của bạn là bạn đang trộn lẫn hai cách khác nhau để thay đổi CSS của phần tử. Đầu tiên là thêm biểu định kiểu bổ sung vào thẻ <head>. Cách khác là sử dụng một phương thức DOM để lấy phần tử và thực sự thay đổi kiểu của nó một cách trực tiếp.

Trước đây có lợi thế là bạn có thể thực hiện thay đổi trước khi phần tử đã thực sự được tải (bằng cách sử dụng @run-at document-start, ví dụ). Điều này có nghĩa là phần tử sẽ được thay đổi khi nó được hiển thị lần đầu tiên. Sau này có lợi thế là bạn chỉ có thể thay đổi một phần tử duy nhất và không thay đổi tất cả các phần tử với class="text".

Đối với phương pháp đầu tiên, bạn sẽ cần phải sửa đổi selector css mà bạn vượt qua để addCss:.

function addCss(cssString) { 
    //... 
} 
addCss (
    '.text { font-family: Helvetica, sans-serif !important; }');

Hoặc một sự thay thế:

var text = document.getElementsByClassName('text')[0]; 
text.style.fontFamily = "Helvetica, sans-serif";

Cuối cùng, đây là một phiên bản ngắn hơn tùy chọn đầu tiên mà tôi có xu hướng sử dụng trong người dùng của mình ^*:

var style = document.createElement('style'); style.innerHTML = ` 
    .text { font-family: Helvetica, sans-serif !important; } 
`; document.head.appendChild(style);

^{* Trong khi GM_addStyle cũng có sẵn, sử dụng bất kỳ hàm GM_ * nào tải mọi thứ vào hộp cát, yêu cầu sử dụng unsafeWindow để sửa đổi JavaScript của trang. Điều này là không cần thiết cho một tính năng đơn giản như vậy. Hơn nữa, vì nó là một cái gì đó có thể dễ dàng được thực hiện mà không sử dụng mã GM_ * đặc quyền, nhà thiết kế của GreaseMonkey khuyến cáo chống lại bằng cách sử dụng chức năng này, và đã được xem xét loại bỏ các tính năng trong một thời gian dài.}

Nguồn

2017-05-03 00:22:56 trlkly

Làm thế nào để kịch bản của tôi có thể thay đổi một Phông chữ Cụ thể (cho một lớp cụ thể)?

Trả lời

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