<!DOCTYPE html>
<html>
<head>
<script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js">
</script>
<title>angular.element()</title>
</head>
<body ng-app="app">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>angular.element()</h3>
<div ng-controller="geek">
<div ng-mouseenter="style()" id="ide" ng-mouseleave="remove()">
{{name}}
</div>
</div>
<script>
var app = angular.module("app", []);
app.controller('geek', ['$scope', '$document',
function ($scope, $document) {
$scope.name = "GeeksforGeeks";
$scope.style = function () {
angular.element(
$document[0].querySelector('#ide')).css({
'color': 'white',
'background-color': 'green',
'width': '200px'
});
};
$scope.remove = function () {
angular.element(
$document[0].querySelector('#ide')).css({
'color': 'black',
'background-color': 'white'
});
};
}
]);
</script>
</body>
</html>