我想访问和修改使用角度视图加载的元素。我似乎无法做到,但元素在控制台中输出就好了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
</head>
<body data-ng-app="myapp">
<div class="wrap">
<div class="header"></div>
<div class="content">
<div data-ng-view=""></div>
</div>
</div>
<script type="text/javascript" src="/content/plugins/jquery/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="/content/plugins/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="/content/plugins/pxgradient/pxgradient-1.0.2.jquery.js"></script>
<script type="text/javascript" src="/content/plugins/angularjs/angular.js"></script>
<script type="text/javascript" src="/content/plugins/angularjs/angular-route.js"></script>
<script type="text/javascript" src="/content/plugins/angularjs/angular-animate.js"></script>
<script type="text/javascript" src="/app/app.js"></script>
<script type="text/javascript" src="/content/js/main.js"></script>
</body>
</html>
<div class="home">
<h1 class="gradient">Transformation is comming</h1>
</div>
$(function () {
var element = $('.gradient');
console.log(element); // this works
element.css('color', 'red'); // this does not
});
答案 0 :(得分:1)
您的元素可能尚未“准备好”(尚未在DOM中)。
您需要在jquery document.ready函数中访问它 如果使用Angular,则在引导过程完成后,使用Angular angular.element(document).ready
答案 1 :(得分:1)
好的我想我有一个解决方案,试试这个:
app.run(function ($rootScope) {
$rootScope.$on('$viewContentLoaded', function () {
$('.gradient').css('color', 'red');
});
});
答案 2 :(得分:0)
也许你的元素有一个你应该覆盖的css规则。 试试这个:
$('.gradient').removeAttr('style').css('color','red');
答案 3 :(得分:0)
您需要编写CSS作为对象:
element.css({'color':'red'});