javascript - 如果宽度<高度使用Javascript旋转图像而不修改每个图像?
问题描述
我正在尝试获取 html 页面上的所有图像元素,然后检查每个图像是否为width < height
(纵向)然后旋转它。
问题是我的脚本不适用于每个图像,但适用于所有图像,因为我通过“img”标签获取图像,然后我不知道如何为单个图像应用旋转。
是否可以在不必修改每个图像的标记的情况下执行此操作(我想避免为每个图像放置 id)?
<script>
$(document).ready(function() {
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
img = document.getElementsByTagName("img")[i];
var width = img.clientWidth;
var height = img.clientHeight;
if(width<height){
img.setAttribute('style','transform:rotate(90deg)'); //how do I apply this for each image?
}
else{
}
}
});
</script>
解决方案
您的代码似乎适用于正确尺寸的图像。但是,您可以稍微更改代码。对于您提供的代码,您无需执行以下操作:
img = document.getElementsByTagName("img")[i];
在每次迭代的 for 循环中,因为这是一个运行成本很高的函数。相反,您已经有document.getElementsByTagName("img");
存储在的结果imgs
,因此您可以使用它来代替:
img = imgs[i];
请参阅下面的工作示例:
$(document).ready(function() {
var imgs = document.getElementsByTagName("img");
var imgSrcs = [];
for (var i = 0; i < imgs.length; i++) {
img = imgs[i];
var width = img.clientWidth;
var height = img.clientHeight;
if (width < height) {
img.setAttribute('style', 'transform:rotate(90deg)');
}
};
});
img {
height: 150px;
width: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Width > Height</p>
<img src="https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_1904,c_limit/so-logo-s.jpg" />
<p>Width < Height</p>
<img src="https://d1qb2nb5cznatu.cloudfront.net/startups/i/32728-274244db60c65e1cc32abb4c54a2c582-medium_jpg.jpg?buster=1442602512" />
<p>Width < Height</p>
<img src="https://images.unsplash.com/photo-1522092787785-60123fde65c4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=94d6ebf03fdc6a3c8159ac9aeceb0483&w=1000&q=80" />
此外,由于您使用 jQuery,因此使用 jQuery 方法可以更轻松地完成此操作:
$(document).ready(function() {
$('img').each((_, elem) => {
let width = $(elem).width();
let height = $(elem).height();
if(width < height) {
$(elem).css({'transform': 'rotate(90deg)'});
}
});
});
img {
height: 150px;
width: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Width > Height</p>
<img src="https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_1904,c_limit/so-logo-s.jpg" />
<p>Width < Height</p>
<img src="https://d1qb2nb5cznatu.cloudfront.net/startups/i/32728-274244db60c65e1cc32abb4c54a2c582-medium_jpg.jpg?buster=1442602512" />
<p>Width < Height</p>
<img src="https://images.unsplash.com/photo-1522092787785-60123fde65c4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=94d6ebf03fdc6a3c8159ac9aeceb0483&w=1000&q=80" />
推荐阅读
- arrays - \0 使用循环初始化 char 数组时
- ios - Alamofire 5 的刷新令牌问题 AuthenticationInterceptor
- javascript - 在 evo 日历中设置当前日期的默认日期
- python - 导入代码在本地计算机上工作正常,但在 aws 上出错
- c++ - 运行 cmake 时,`No CMAKE_ASM_COMPILER found` 错误
- laravel - Laravel Lighthouse 限制突变场
- jquery - 需要一个不工作的 JQuery 函数
- autodesk-forge - Autodesk.Viewing.UI.DataTable 压垮其他 DataTable
- python - 如何在python中选择不同比例的随机数?
- reactjs - axios 无法在 reactjs 中获取 public/[name].json 文件夹