我有功能,由于某种原因,该功能无法正常工作。在我的AngularJS应用中,我需要使用jqLite操作CSS。
假设有两个div,第一个具有一定的宽度。
<div class="primary-item"></div>
<div class="secondary-item"></div>
我想将次要项目宽度设置为与主要项目相同。
一切正常,直到功能更改CSS为止。似乎widthToSet
价值没有传递到那里。
secondaryItem.css({width: + widthToSet + 'px', height: '100px'});
请在下面的代码段中查看代码。
function changeCss() {
var masterItem = angular.element( document.querySelector( '.primary-item' ) );
var widthToSet = angular.element( masterItem.prop('offsetWidth') );
alert("width to set is" + widthToSet);
var secondaryItem = angular.element( document.querySelector('.secondary-item') );
secondaryItem.css({width: + widthToSet + 'px', height: '100px'}); /*width is not being set*/
//secondaryItem.css({width: '300px', height: '100px'}); /*works fine*/
}
angular.element(document).ready(function () {
changeCss();
});
.primary-item {border: 1px solid red; padding: 10px;}
.secondary-item {border: 1px solid green; padding: 10px;}
.primary-item, .secondary-item {float: left; clear: both; margin-bottom: 10px;}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<div class="primary-item">Some content here</div>
<div class="secondary-item"></div>
谢谢!
感谢@Hacketo的帮助。
问题出在widthToSet
变量的声明中。
function changeCss() {
var masterItem = angular.element( document.querySelector( '.primary-item' ) );
var widthToSet = masterItem.prop('offsetWidth');
var secondaryItem = angular.element( document.querySelector('.secondary-item') );
secondaryItem.css({width: + widthToSet + 'px', height: '100px'});
}
angular.element(document).ready(function () {
changeCss();
});
.primary-item {border: 1px solid red; padding: 10px;}
.secondary-item {border: 1px solid green;}
.primary-item, .secondary-item {float: left; clear: both; margin-bottom: 10px;}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<div class="primary-item">Some content here</div>
<div class="secondary-item"></div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句