从 jquery 的 telerik radcombobox 中删除字体系列

Question

我正在使用 js 在 c# 中创建一个 Web 应用程序，我在其中使用了 telerik 组件，

问题是我的 telerik 下拉菜单的自定义 class 是

.RadComboBox_Bootstrap {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

现在我想删除这个class我做了类似下面的事情

$('.RadComboBox_Bootstrap').css({'font-family':''})

和

$('.RadComboBox_Bootstrap').css({'font-family':'Arial !important'})

但对我没有任何作用，

我尝试了以下方法

$('.RadComboBox_Bootstrap').eq(13).css({'font-size':'8px'})

radcombobox 的字体大小已更改，但当我尝试更改字体系列时，我无法成功，这可能是什么问题？

Answer 1

我有一个问题：你说你想删除 class，但后来你试图覆盖 css 规则......你想实现什么？

如果您想删除 class，您应该使用 removeClass 方法。请参阅文档 here；

如果您想覆盖 css 规则：您的

是否可能

$('.RadComboBox_Bootstrap').css({'font-family':''})

在.RadComboBox_Bootstrap元素之前执行是rendered/elaborated？（document.ready（或$(function(){...})）中的$('.RadComboBox_Bootstrap').css({'font-family':''})是函数吗？）。如果在加载 dom 之前执行指令，则 jQuery 选择器找不到任何元素并且不应用 css 规则。在此示例中，规则将 NOT 应用

<html>
    <head>
        <!-- import jquery here -->
        <script>
           $('.RadComboBox_Bootstrap').css({'font-family':''})
        </script>
    </head>
    <body>
        <div class="RadComboBox_Bootstrap"></div>
    </body>
</html>

在这个例子中，它将

<html>
    <head>
        <!-- import jquery here -->
        <script>
            $(function(){
                $('.RadComboBox_Bootstrap').css({'font-family':''});
            });
        </script>
    </head>
    <body>
        <div class="RadComboBox_Bootstrap"></div>
    </body>
</html>

无论如何，您始终可以编写自己的 css 规则来覆盖您报告的规则：

.my-wrapper .RadComboBox_Bootstrap {
    font-family: Arial,sans-serif;
}

（您必须将 my-wrapper class 添加到父级）。这样，您的自定义规则是 "more specific" 用于 dom 元素，并且将被应用。有关具体细节，请参阅 this

Answer 2

如果你想禁用嵌入式皮肤，你可以将 EnableEmbeddedSkins 属性设置为 false 或者如果你只想覆盖几个规则，最好创建你自己的 class，使用 CssClass 属性将其添加到 ComboBox。在 CSS 文件中为您的 class 创建一个强选择器并覆盖规则。 Telerik 控件高度依赖它们自己的 classes，删除它们可能会导致意外的外观。

<telerik:RadComboBox ID="RadComboBox1" runat="server" EnableEmbeddedSkins="false" CssClass="myClass">
</telerik:RadComboBox>

请参阅 Specificity and CSS Specificity: Things You Should Know 以更好地了解 CSS class 选择器以及如何使它们更强大。

更新：

改变字体可以用纯CSS来实现。您只需要关注上面提到的CSS特异性。

了解 Telerik RadComboBox 由两个单独的 HTML 元素组成很重要。 RadComboBox 元素和 RadComboBoxDropDown 元素。一个项目，所选项目属于 RadComboBox 元素，而当 DropDown 打开时显示的其余项目，它们属于 RadComboBoxDropDown 元素。

更改 RadComboBox 元素的字体只会更改所选项目。还需要为 RadComboBoxDropDown 中的项目应用其他样式。

示例CSS：

html body .RadComboBox_Bootstrap, /** font for RadComboBox */
html body .RadComboBoxDropDown_Bootstrap { /** font for RadComboBoxDropDown */
    font-family: cursive;
}

从 jquery 的 telerik radcombobox 中删除字体系列

remove font-family from telerik radcombobox from jquery

javascript

telerik

radcombobox