父样式未应用于子样式属性

Question

我通过获取其ID来在Body of DOM中应用字体大小，但在某些子元素中不复制font-size。

此外，我需要知道元素中的font-size是否通过外部CSS应用然后它可能是一个问题？

在用户单击以保存设置的代码中，然后调用redirectToPreferences（）并且#ulMainMenu，＃dropDownMenuItems是应该应用font-size的元素的ID

如果有任何技术概念我错了，那么详细说明

function setFontInPreference(data) {
    //data will be font size in % like 100%, 120% etc
    var percentage = data //$("#hdnFontPercentage").val();
    var font = (percentage / 100) * 14;
    var body = document.getElementById('bodywrapper'); //body has Id = bodywrapper
    body.style.fontSize = font + "px";

}

function redirectToPreferences() {

    hideLoader();
    $.ajax({
        type: "GET",
        url: '/Administration/GetFontSize',
        async: true,
        cache: false,
        beforeSend: function () {
            showGridLoader();
        },
        success: function (data) {

            if (data != null && data != 'undefined' && data != '') {

                setFontInPreference(data);
                $("#ulMainMenu").html('');
                $("#dropDownMenuItems").html('');
                $("#dvSubMenu").html('');
                $("#dvQuickLinks").html('');


                getMainMenu();

                //setFont();
            }
            else {



                hideGridLoader();
            }
        },
        complete: function () {
            hideGridLoader();
        },
    });

    ScrollPageToTop();
}


//This is called in Master Script
function setFont() {

    debugger;
    var percentage = $("#hdnFontPercentage").val();
    var font = (percentage / 100) * 14;
    var body = document.getElementById('bodywrapper');

    body.style.fontSize = font + "px";


    })
}

Answer 1

表单控件（例如输入，选择等）不会自动继承字体属性。 您必须通过分配font: inherit显式继承它们。

在下面的演示中，有两种相同的形式：

• 它们都继承了以下字体属性:root如<label> 。
• 在第一种形式#A它的表单控件仍然具有默认字体属性。
• 在第二种形式#B它已显式声明输入并选择使用font:inherit继承字体属性。

因此，应用font: inherit全局font: inherit和默认字体属性:root 。 作为额外定义font-size的额外奖励:root如果你使用rem测量单位， :root （或html ）会为你提供一个强大的font-size钩子，因为这是他们相对的。

 :root { font: 700 16px/1.1 Consolas } form { font-size: 1.5rem } #B input, #B select { font: inherit } 

 <form id='A'> <label>Test</label> <select> <option>Test</option> <option>Test</option> </select> <input value='Test'> <input type='submit'> </form> <form id='B'> <label>Test</label> <select> <option>Test</option> <option>Test</option> </select> <input value='Test'> <input type='submit'> </form> 

Answer 2

将继承值添加到子属性的名称。