时间戳

首页 > 解决方案 > 如何在没有可见文本区域的情况下在 Spotfire 中更改过滤器的 CSS？

css - 如何在没有可见文本区域的情况下在 Spotfire 中更改过滤器的 CSS？

问题描述

我想更改 Spotfire 中一个过滤器的 CSS。

一种方法是添加一个文本区域，在那里复制过滤器并添加 CSS。

例如：

<head>
<style>
.ColumnFilter .sf-element-filter-item:nth-of-type(2) {background-color: salmon;}
</style>
</head>

<SpotfireControl id="42" />

这会在文本区域和过滤器面板中更改过滤器的背景颜色。

现在的问题是我不想有文本区域，只有面板。但是如果我删除文本区域，面板中的 CSS 效果就会消失。

标签： cssspotfire

解决方案

将您的 css 存储在文档属性或 javascript 中，并使用 js 将其附加到头部。它仍然需要使用文本区域，但只需要初始化一次（即起始页、登陆页、主页等）。重新加载浏览器时，请记住返回同一页面，以便 js 可以重新初始化。

$(function(){
    cssTxt = $("#css").text();  //label property 

    if($('#custom-css').length){
        //do nothing
        console.log('custom-css has already been appended') 
    } else {
        //add css to head
        console.log('%cappending custom-css','color:red') 

        $('head').append($('<style id=custom-css>'+cssTxt +'</style>'));
    }
});

乔琳·罗伯逊

推荐阅读