CSSプロパティを動的に変更する方法

今、CSSにハードコードされた背景画像URLがあります。私は、Angularのロジックを使って背景画像を動的に選択したいと思います。ここで私は、現在持っているものです。CSSプロパティを動的に変更する方法

HTML

<div class="offer-detail-image-div"><div>

CSS

.offer-detail-image-div { 
    position: relative; 
    display: block; 
    overflow: hidden; 
    max-width: 800px; 
    min-height: 450px; 
    min-width: 700px; 
    margin-right: auto; 
    margin-left: auto; 
    padding-right: 25px; 
    padding-left: 25px; 
    -webkit-box-flex: 1; 
    -webkit-flex: 1; 
    -ms-flex: 1; 
    flex: 1; 
    border-radius: 5px; 
    background-image: url('/assets/images/118k2d049mjbql83.jpg'); 
    background-position: 0px 0px; 
    background-size: cover; 
    background-repeat: no-repeat; 
}

あなたが見ることができるように、CSSで背景画像が特定のファイルの場所を参照します。私はプログラムで画像のURLの場所を特定できるようにしたい。私は本当にどこから始めるべきか分かりません。私はJQueryを知らない。ありがとうございました。

出典

2016-09-12 rashadb

https://docs.angularjs.org/api/ng/directive/ngStyleを確認しましたか？ –

@ Makarov Sergey私はngStyleを見ましたが、それがクラスかクラスの一部を変更するかどうかは私には分かりません。また、ngStyleまたはngClassが実際に優れているかどうか、またはそれらがどのように異なるかはわかりません。おそらく答えの例？ :) – rashadb

ng-styleを使用すると、AngularJSを使用してCSSクラスプロパティを動的に変更できます。

このng形式の例は、少なくともコンセプトを理解するのに役立ちます。道に従うことによってURL：あなたは背景画像を変更することができますngStyle

var myApp = angular.module('myApp', []); 
 
myApp.controller("myAppCtrl", ["$scope", function($scope) { 
 
     $scope.colors = ['#C1D786', '#BF3978', '#15A0C6', '#9A2BC3']; 
 
     $scope.style = function(value) { 
 
      return { "background-color": value }; 
 
     } 
 
}]);

ul{ 
 
    list-style-type: none; 
 
    color: #fff; 
 
} 
 
li{ 
 
    padding: 10px; 
 
    text-align: center; 
 
} 
 
.original{ 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="myApp"> 
 
<div ng-controller="myAppCtrl"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="span12"> 
 
     <ul> 
 
      <li ng-repeat="color in colors"> 
 
      <h4 class="original" ng-style="style(color)"> {{ color }}</h4> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</body>

編集-1

ため

詳しい情報。

$scope.style = function(value) { 
    return { 'background-image': 'url(' + value+')' }; 
}

出典

2016-09-12 09:07:24

@読み込み中です。私は今試してみるつもりですが、私はそれを理解していると思います。私に数分間それを聞いてください。 – rashadb

@rashadbあなたはそれを試すことができます、あなたは色の代わりに背景画像を変更する必要があります。 –

JSのURL部分を正しく実装する方法が得られていないため、次のエラーが表示されます。ReferenceError：urlが定義されていません – rashadb

ng-class：documationを使用できます。 directiveチェックで行う場合は、directive - attr：attrにチェックしてください。

出典

2016-09-12 09:02:06

@ Itsik Mauyhas、これは役に立ちますが、私の場合はプログラムでクラスを呼びたくはありません。私はちょうどクラス内の単一の項目、背景画像をプログラムで変更したいと思う。 ng-classでこれを行う方法は私には分かりません。 – rashadb

この場合、attrを動的に追加および削除して、指示文を見てください。 –

2つの違いを詳しく見てみましたが、ngclassはダイナミックにスタイルの要素を設定するための固定されたクラスを動的に提供しています。私はng-styleが私の場合に対して正しいと信じています。ありがとう。 – rashadb

-1

あなたはボックスはあなたが直接[ngStyle]を使用することができ、高さと幅

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<body> 
 

 
<p>Change the value of the input field:</p> 
 

 
<div ng-app="" > 
 

 
<input ng-model="myCol" type="textbox"> 
 

 
<div style="background-color:red; width:{{myCol}}px; height:{{myCol}}px;"> </div> 
 

 

 
</div> 
 

 

 
</body> 
 
</html>

出典

2017-08-18 14:41:34

を変える見ることができるテキストボックスにサイズを入力します。それはマップですので、あなたが直接そのようにその要素の一つに対応することができます。たとえば[ngStyle.CSS_PROPERTY_NAME]

：また

<div class="offer-detail-image-div" 
    [ngStyle.background-image]="'url(' + backgroundSrc + ')'">Hello World!</div>

、資産を提供するため、角度を提供する際に便利になることができbypassSecurityTrustStyleユーティリティ機能を持っています動的に

出典

2017-12-15 21:45:39 sofend

CSSプロパティを動的に変更する方法

答えて

関連する問題