将媒体查询动态添加到页面并覆盖应用程序端生成的 html 的样式

Question

我有代码，我可以在应用程序端将自定义 css 动态添加到我的 html，如下所示：

C# 代码：

html = html + string.Format("<div id='{0}' class='sectioncon SectionComp 
responsiveSectionClass_{0}'>", sectionGUID);

这个 html 变量返回到 UI 然后我使用 (someselector).append(html)

然后客户端我检索此信息并使用 jquery 吐出媒体查询，如下所示：

Jquery代码：

var stylesheetXS = $("<style id='" + this.responsiveClass + "'>")

var txtAll = "";
txtAll += "@@media screen and (max-width : 480px) {";
txtAll += "." + this.responsiveClass;
txtAll += "{";
txtAll += this.Style;
txtAll += "}";
txtAll += "}";

$(stylesheetXS).html(txtAll);

$("head").append(stylesheetXS);

所以 this.responsiveClass 是对 responsiveSectionClass_{0} 的引用，其中 {0} 是 GUID。

先添加 Jquery 代码，然后再将 c# 代码附加到 UI，那么为什么我的动态生成的媒体查询不影响 class html代码?

此外，当我 select 使用 chrome 开发人员工具的元素时，我看不到已生成的媒体查询，这就是为什么我认为我在这里做错了什么。

这是生成的html或其一部分：

媒体查询：

@media screen and (max-width : 480px) {.responsiveSectionClass_d7099673a3924894bec0bdb59f6ad0b0{padding-top:30px;padding-bottom:30px;width:auto;height:auto;}}

HTML:

<div class="sectioncon SectionComp responsiveSectionClass_d7099673a3924894bec0bdb59f6ad0b0" style="padding-top:30px;padding-bottom:30px;width:auto;height:auto;"></div>

这是我在代码检查器中看到的全部内容：

element.style {
    padding-top: 30px;
    padding-bottom: 30px;
    width: auto;
    height: auto;
}
.sectioncon {
    padding-top: 30px;
    padding-bottom: 30px;
    width: auto;
    height: auto;
}

对于 Nathans 的回应，我尝试了这个：

var txtAll = "";
                txtAll += "@@media screen and (max-width : 480px) {";
                txtAll += "." + this.responsiveClassXS;
                txtAll += "{";
                txtAll += this.Style;
                txtAll += "}";
                txtAll += "}";

                var css;
                css = document.createElement("style");
                css.id = this.responsiveClassXS
                css.type = 'text/css';
                css.media = "all";
                css.textContent = txtAll;
                document.getElementsByTagName("head")[0].appendChild(css);

但仍然无法识别媒体查询。

Answer 1

出于某种原因，我无法在堆栈片段中使用它，但您可以观看现场演示 here（或者只需将下面的代码保存为 .html 文件并打开它在浏览器中..）我将背景设为蓝色，这样它会更加突出..

这是这个工作的视频：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

</body>
<script>
    let iframeEl = document.createElement("iframe");
    iframeEl.setAttribute("style", "height: 100%; width: 100%;");
    document.body.appendChild(iframeEl);
    iframeEl.contentDocument.open();
    iframeEl.contentDocument.write('<div class="sectioncon SectionComp responsiveSectionClass_d7099673a3924894bec0bdb59f6ad0b0" style="padding-top:30px;padding-bottom:30px;width:auto;height:auto;"></div>');
    iframeEl.contentDocument.close();
    let styleSheet = `
        @media only screen and (max-width : 480px) {
            .responsiveSectionClass_d7099673a3924894bec0bdb59f6ad0b0 {
                padding-top: 30px;
                padding-bottom:30px;
                width:auto;
                height:auto;
                background-color: blue;
            }
        }`;
    let style = '<style type="text/css">' + styleSheet + "</style>";
    iframeEl.contentDocument.head.innerHTML += style;
</script>

</html>

将媒体查询动态添加到页面并覆盖应用程序端生成的 html 的样式

Dynamically adding media queries to the page and overriding the styles from generated html from Application Side

javascript

c#

jquery

media-queries