Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to change the value of css property

    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 853
    Comment on it

    Hii,

    This is an intresting features of angularJs you can use when you want to change the value of CSS properties dynamically.

    Using this feature we can change many value of css properties like background color,text color,border-color,font-size etc.

    To learn how it is possible go through the given example below:

    In the given examples below ng-init  directive is used to initialise the value css property and ng-model directive is used to bind the css value.

    In input tag write css properties inline and instead of writting a static css value  use the initialised the value by ng-init.

    Example 1:Change font size

    <div ng-app=" " ng-init="textSize='20px'">
    
    <input style="font-size:{{textSize}}" ng-model="textSize" >
    
    </div>

    Output:Input value having font-size 20px.

    Example 2:Change border-color

    <div ng-app=" " ng-init="borderColor='red'">
    
    <input style="border-color:{{borderColor}}" ng-model="borderColor" >
    
    </div>

    Output:Input value having border-color red.

    Example:3 Change background-color

    <div ng-app=" " ng-init="bgColor='red'">
    
    <input style="background-color:{{bgColor}}" ng-model="bgColor" >
    
    </div>

    Output:Inputbox background color will be red.

    Example:4 Change text-color

    
    <div ng-app=" " ng-init="textColor='red'">
    
    <input style="color:{{textColor}}" ng-model="textColor" >
    
    </div>
    
    

    Output:Input value text color will be red.

     

     

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: