角のある最も外側の<body>タグの背景色を変更する方法

私のAngularAppの背景色をプログラムで変更したいと考えています。ここでの問題は、アプリ内の背景を変更することは、画面の一部にしか適用されないことです。たぶん既にコンテンツで満たされているものだけでしょう。サイト全体で色を変えたい。角のある最も外側の<body>タグの背景色を変更する方法

私はangular.ioによって提供されているシードを使用しています。 index.htmlは次のようになります。

<!DOCTYPE html> 
<html> 
    <head> 
     <base href="/"> 
     <title>Angular QuickStart</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="styles.css"> 
     <!-- Polyfill(s) for older browsers --> 
     <script src="node_modules/core-js/client/shim.min.js"></script> 
     <script src="node_modules/zone.js/dist/zone.js"></script> 
     <script src="node_modules/systemjs/dist/system.src.js"></script> 
     <script src="systemjs.config.js"></script> 
     <script> 
      System.import('app').catch(function (err) { console.error(err); }); 
     </script> 
    </head> 
    <body> 
    <my-app>Loading AppComponent content here ...</my-app> 
    </body> 
</html>

AngularAppから一番外側の「ボディ」のクラスを操作する方法はありますか？

「my-app」タグ内のすべてを変更できます。最初の "body"タグが自分のコントロールにあるようにindex.htmlを設定する方法はありますか？

そうでない場合は、外側の "body"タグを制御する別の方法がありますか？

ありがとうございます！

BRマティアス

出典

2017-01-31 matlan

は私のアプリ '「の代わりに体' を使用して、コンポーネント

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 

    constructor() { 
     document.body.style.background = 'rgba(0, 0, 0, .6)'; 
    } 

}

またはあなたのsrc/styles.css

body { 
    background: whatever; 
}

出典

2017-11-05 16:41:03

あなたはセレクタとして（代わりに'my-app'の）'body'を使用している場合は、それらが同じであるので、あなたがホスト要素に適用され、すべてのスタイルは、同様<body>に適用されます。

@Component({ 
    selector: 'body' 
    styles: [':host { border: solid 10px red;}'] 
}) 
export class AppComponent { 
    @HostBinding('style.background-color') 
    backgroundColor:string = '#ffaacc'; 

}

出典

2017-01-31 17:33:27

で簡単なCSSでもっと簡単な方法がありますトリック、THXを行います – matlan

角のある最も外側の<body>タグの背景色を変更する方法

答えて

関連する問題