1

スタイルシートがページの一部のみをスタイルする、このようなことを達成するための解決策があるかどうか知りたいです。

<link href="/Content/stylesheet.css" for="OnlyApplyStylesWithinHere" rel="stylesheet" type="text/css" />
<div id="OnlyApplyStylesWithinHere">
</div>

スタイルシート自体からこれを実行できることはわかっていますが、私のシナリオでは不可能です。

この効果は Javascript/Jquery で実現できますか?

4

5 に答える 5

1

I made this plugin witch does what you want, if the stylesheet dosn't break the same origin policy.

You can use it like this:

<link rel="stylesheet" href="..." data-wrapper="#mySelector" />

<style data-wrapper="#mySelector">
    .ninja { 
        visibility: hidden;
    }
</style>

And again after initialize:

$("link[rel='stylesheet']").addWrapperToStyle("#mySelector");

$("style").addWrapperToStyle("#mySelector");

    (function($) {
        var $styleSheet = $("<style type='text/css'/>").appendTo("head");

        function getStyle( $element, callback ) {
            callback($element.text());
        }
        function getLink( $element, callback ) {
            $.get($element.attr("href"), function( style ) {
                callback(style);
            });
        }
        function appendStyle( style ) {
            $styleSheet.text(function(i, text) {
                return text + "\n" + style;
            });
        }

        function wrapStyle( element, selector ) {
            var $element = $(element);

            if ( $element.is("style") ) {
                getStyle( $element, callback );
            } else {
                getLink( $element, callback );
            }

            function callback( style ) {
                if ( style ) {
                    style = ("" + style).replace(/([^}]+){/g, function(match) {
                        var matches = match.split(","),
                            i = 0,
                            len = matches.length;

                        for ( ; i < len; i++ ) {
                            matches[i] = selector + " " + $.trim(matches[i])
                        }

                        match = matches.join(",");

                        return match;
                    });

                    appendStyle(style);

                    $element.remove();
                }
            }
        }

        $(function() {
            $("link[rel='stylesheet'][data-wrapper], style[data-wrapper]").each(function() {
                wrapStyle( this, this.getAttribute("data-wrapper") );
            });
        });
        $.fn.addWrapperToStyle = function( wrapper ) {
            return this.each(function() {
                wrapStyle(this, wrapper);
            });
        } 
    })(jQuery);

Im not sure about cross browser compatibility. But you can try...

于 2012-08-14T11:24:00.637 に答える
1

これには、スコープ スタイルシートと呼ばれる HTML5 機能があります。これはWHATWG ドラフトの一部ですが、ブラウザーのサポートは存在しません (Chrome は 経由about:flagsでサポートしていますが、すぐに使用できるサポートはありません)。この JavaScript プラグインを使用して機能させることができます。

または、サーバー側でスタイルシートの書き換えが可能な場合は、SASSのようなものを使用できます。

#my-section {
    @import "local-copy-of-the-stylesheet.scss";
}
于 2012-08-14T16:07:52.360 に答える
0

メディア属性が役立つかどうかを確認してください。media="handheld" は、Apple だけに CSS を定義するのではなく、すべての小さな画面のデバイスに CSS を定義します。

http://www.w3schools.com/tags/att_link_media.asp

于 2012-08-14T10:30:48.360 に答える
0

スタイルを 3 つの方法で配置できます。

1)Internal

スタイルタグを使用して、すべてのスタイルを同じhtmlページ内に配置します

2)External

HTMLページのheadセクションでスタイルシートの参照を与えることにより

3)In-line

これは、html 要素の style 属性を使用して行うことができます。<div style="some styles"></div>

上記の誰でもあなたの疑問を解決できると思います。

于 2012-08-14T10:31:21.760 に答える
0

あなたが要求していることが可能だとは思いません。

ただし、ハックな方法の 1 つは、この HTML マークアップを別のファイルに入れ、スタイルシートを にリンクしてheadから、iframe.

<head>
   <link href="[main stylesheet" />
   <link href="[this page only stylesheet]" />
</head>

私が言うように、それはハックですが、スタイルシートを変更しない唯一のアプローチだと思います。

于 2012-08-14T11:23:10.543 に答える