Javascript 如何动态更改网页的内容和样式？

我正在从事一个项目，我的要求是动态提供页面内容，其中将包含不同的div或表，并且我需要在运行时传递这些div的样式，这些样式可以多次更改。我正在使用AngularJS进行项目。我可以找到一些应用于div的类的css属性是使用ng模型传递的，但是我想传递我的整个css属性，该类的应用可能是来自页面的Textarea元素的json形式

感谢您在这方面的帮助。非常感谢

我的部分代码如下所示：

<div  ng-style="sampleStyle" class="col-md-6 ">{{sampleText}}</div>

<textarea ng-model="sampleText" cols="40">
</textarea>
<textarea ng-model="sampleStyle" cols="40">
</textarea>

尝试改用ng类

html:

js:

---

你们试过什么吗？嗨，精神病患者，我试过把值传递给sampleStyle，但没用。虽然这听起来有些多余，但我也试着用蛮力将价值传递给ng风格，但即使这样对我也不起作用。视图：{{sampleText}}Set Style Controller:$scope.setStyle=函数{$scope.sampleStyle1={}；$scope.sampleStyle1=$scope.sampleStyle；//console.log$scope.sampleStyle1；}感谢ShaharZ的解决方案，但似乎使用您的解决方案，我可以传递css中已经存在的任何类。无论我在文本区域中给出什么样的示例样式，它都将与col-md-6一起绑定到我的类中。我想要的是从文本区域本身传递动态样式，如{font size:30px；color:red；padding:10px；margin:10px；}。@NitinKumar抱歉，误解了您的要求。更新了我的答案。请注意，为了学习Angular，您可以这样做，但几乎没有实际理由双向绑定样式信息。通过创建自定义指令有更好的解决方案，但这是最简单的

{
color: xxx; background: xxx; font-size: xx; ...
}

<div ng-class="sampleStyle" class="col-md-6 ">{{sampleText}}</div>
<textarea ng-model="sampleText" cols="40"></textarea>
<textarea ng-model="sampleStyle" cols="40"></textarea>

<div ng-class="myStyle" class="col-md-6 ">{{sampleText}}</div>
<textarea ng-model="sampleText" cols="40"></textarea>
<textarea ng-model="sampleStyle" ng-change="styleChangeFn()" cols="40"></textarea>

app.controller('MainCtrl', ["$scope", "$parse", function($scope, $parse) {
  $scope.styleChangeFn = function() {
     $scope.myStyle = $parse($scope.sampleStyle)($scope);
  }
}]);