如何获取内联样式中指定的字体大小答案

【问题标题】：How to get font size specified in inline style如何获取内联样式中指定的字体大小
【发布时间】：2016-05-02 09:03:50
【问题描述】：

下面的代码打印出无效的字体大小：Chrome 中的 16pt。如何解决这个问题，以便返回与内联样式中指定的相同的字体大小 12pt？

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <script>
        $(function () {
            var css = $('#_QNU0OVBMB').css(["font-size"]);
            alert(css["font-size"]);
        });
    </script>

</head>
<body>
    <div id="_QNU0OVBMB" style="font-size:12pt">
        m.FIRMA
    </div>

【问题讨论】：

标签： jquery html css font-size

【解决方案1】：

jQuery .css() method 返回 computed 样式属性。

由于您想获取内联样式属性中指定的值，您可以直接访问元素的style property 上的fontSize 属性以获取12pt。

var element = document.getElementById('_QNU0OVBMB'),
    fontSize = element.style.fontSize;

alert(fontSize); // 12pt

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="_QNU0OVBMB" style="font-size:12pt">
  m.FIRMA
</div>

同样，使用 jQuery，您只需要访问 jQuery 对象中的 DOM 元素：

var fontSize = $('#_QNU0OVBMB')[0].style.fontSize;

alert(fontSize); // 12pt

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="_QNU0OVBMB" style="font-size:12pt">
  m.FIRMA
</div>

【讨论】：

【解决方案2】：

警报在 PIXELS 中显示您的大小，而 16px 确实 = 12pts

Pixel to point converter

【讨论】：

【解决方案3】：

它没有说 16pt 它说 16px，这就是 chrome 呈现该指令的方式。点通常仅适用于印刷媒体，如果您使用像素，它应该可以按预期工作。

【讨论】：

【解决方案4】：

当您想要覆盖它们时，请尝试使用 !important。 12pt = 16px。

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <script>
        $(function () {
            var css = $('#_QNU0OVBMB').css(["font-size"]);
            alert(css["font-size"]);
        });
    </script>

</head>
<body>
    <div id="_QNU0OVBMB" style="font-size:12px!important">
        m.FIRMA
    </div>

【讨论】：