Question

我正在尝试构建一个辅助功能工具，以便放大和缩小我网站中的所有字符。到目前为止一切顺利，我创建了三个按钮来增加，减少和重置我的字母的大小，但我有一个问题。我想选择除标题中的字母之外的所有元素，在这种特殊情况下，我标题中的所有子元素都无关紧要。

这是我的代码：

HTML：

<div id="text-size">
      <a href="" id="text-shrink">A</a><a href="" id="text-reset">A</a><a href="" id="text-enlarge">A</a>
</div>

JAVASCRIPT（与jQuery混合）：

function resizeText(multiplier) {
    var allElements = document.querySelectorAll( 'body *' );
    for(var i = 0; i < allElements.length; i++) {
        if (allElements[i].style.fontSize == '' || multiplier == 0) {
            allElements[i].style.fontSize = '15px';
        }
        allElements[i].style.fontSize = parseInt(allElements[i].style.fontSize) + multiplier + "px";
    }
}
jQuery(document).ready(function($) {
    $('#text-shrink').click(function(e){
        e.preventDefault();
        resizeText(-1);
    });
    $('#text-reset').click(function(e){
        e.preventDefault();
        resizeText(0);
    });
    $('#text-enlarge').click(function(e){
        e.preventDefault();
        resizeText(1);
    });
});

我尝试过类似的事情：

var allElements = document.querySelectorAll( 'body *:not(header)' );

但它不起作用。

有什么建议吗？

Answer 1

好的，你需要更新你的css而不是单个元素大小。 CSS

html,body {font-size:100%;}
//Header example
h1 {font-size:2.5rem;}

使用Javascript / jquery的/角为用户设置一个cookie，表示它们是“X”变量，而不是将以下css注入到站点的body元素中，以便在每个页面上加载它：“这个cookie是什么，它的价值是什么”

if(textSizeCookieVal){$('body').css('font-size','120%')'}

或者：并且可能更容易 ...在主体上设置一个类，将主体的字体大小设置为某个级别的“％”，并将所有其他字体设置为rems

这是正确完成工作的最快方式。

另外，要使某些内容真正可访问，您需要将所有字体设置为REM或EM，以便工具将整个字体设置得更大或更小。我们在州内做了类似的事情

Answer 2

这是另一种方法，它存储所有元素的初始字体大小，然后重置它们，因此您不必将所有元素都设置为class A { b() {eval("with(this) { 1 } ")} } new A().b() // strict mode error的字体大小。

它也排除了标题

function b() {eval("with(this) { 1 }")}
b()
> 1

15px

function resizeText(multiplier) {
    $('body *').not('header, header *').css('font-size', function(_,val) {
    	return multiplier === 0 ? $(this).data('default_font') : (+val.replace(/\D+/g,'')) + multiplier;
    })
}

jQuery(document).ready(function($) {
    $('body *').each(function() {
      $(this).data('default_font', +$(this).css('font-size').replace(/\D+/g,'') || 15);
    });
    
    $('#text-shrink').click(function(e){
        e.preventDefault();
        resizeText(-1);
    });
    $('#text-reset').click(function(e){
        e.preventDefault();
        resizeText(0);
    });
    $('#text-enlarge').click(function(e){
        e.preventDefault();
        resizeText(1);
    });
});

使用javascript选择DOM的所有元素，除了特定元素的所有子元素

2 个答案: