Question

我通过获取DOM的ID在DOM主体中应用了字体大小，但是某些子元素中没有复制字体大小。

此外，我需要知道是否通过外部CSS应用元素中的字体大小，这可能是一个问题吗？

在代码中，当用户单击以保存设置然后调用redirectToPreferences（）且＃ulMainMenu，＃dropDownMenuItems是应应用字体大小的元素的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，并将默认字体属性应用于:root。另外，如果您使用font-size度量单位，则在:root（或html）上定义了font-size会给您带来强大的吸引力，而您可以使用rem度量单位是相对的。

: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

在子代的属性名称中添加继承值。

父样式未应用到“子样式”属性

2 个答案: