基于中小型单选按钮选择重新调整图像大小:是否可以通过CSS进行调整

Re-size image based on small medium large radio button selection: Is it possible through CSS?

本文关键字：调整 是否 可以通过 CSS 图像 选择 单选按钮 中小型 新调整      更新时间：2023-09-26

我有一个员工扩展列表表，旁边有员工姓名和员工拇指指甲图像。我需要为用户提供中小型单选按钮（或下拉菜单）选项，并相应地显示员工图像。我想知道这是否可以使用CSS完成？或者，我可以根据单选按钮的选择，用java脚本创建一个CSS类吗？我试图通过java脚本来实现，但它只适用于我的第一行。其余行保持不变。这是我的代码的一瞥。

<Script type="text/javascript">
    function changeClass(){
alert(document.getElementById("lastName").getAttribute("style"));
var imgSize = document.getElementById("lastName").getAttribute("style");

if(document.getElementById('ImgSizeSmall').checked == true) {
    document.getElementById('lastName').setAttribute("style", "width:75px;" );
} else if(document.getElementById('ImgSizeMedium').checked == true) {
    document.getElementById('lastName').setAttribute("style", "width:100px;" );
}  else if(document.getElementById('ImgSizeLarge').checked == true) {
    document.getElementById('lastName').setAttribute("style", "width:150px;" );
}
</Script>
<Div style="width:385px;height: 950px; float:left; background-color:#A5B3D8;">
    <p align="left">
    <p align="left"><b>Image Size:</b><br>
        <input id="ImgSizeSmall" type="radio" name="ImgSize" value="small" checked="checked" onclick="changeClass()">  <b><i>Small</i></b>
        <input id="ImgSizeMedium" type="radio" name="ImgSize" value="medium"> <b><i>Medium</i></b>
        <input id="ImgSizeLarge" type="radio" name="ImgSize" value="large"> <b><i>Large</i></b>
    </p>
</DIV> 
<table id="table_firstname_lastname">
        <thead>
            <tr>
                <th style="width: 208px;">First Name</th>
                <th style="width: 208px;">Last Name</th>
                <th style="width: 208px;">Phone Number</th>
                <th style="width: 275px;">Location</th>
                <th style="width: 208px;">Cell</th>
                <th style="width: 275px;">Team(s)</th>
            </tr>
        </thead>
        <tbody>             
            <tr>
                <td>first name</td>
                <td>last name 
                     <img  id="lastName" style="width: 75px;"  src="http://imagesource/image.jpg"  align="right"></a></td>
                <td>9999999999</td>
                <td>location 1</td>
                <td>8888888888</td>
                <td>team name</td>
            </tr>
        </tbody>
    </table>

谢谢，M

我记得CSS技巧中的一篇文章，它导致了Fiddle

HTML:

<div> 
<input type="radio" id="tab-1" name="tab-group-1" checked>
<input type="radio" id="tab-2" name="tab-group-1">
<input type="radio" id="tab-3" name="tab-group-1">
<img src="http://www.mycatspace.com/wp-content/uploads/2013/08/adopting-a-cat.jpg"/>
</div>

CSS：

#tab-1[type=radio]:checked ~ img 
{
  height: 500px;
  width: 500px;
}
#tab-2[type=radio]:checked ~ img 
{
  height: 200px;
  width: 200px;
}
#tab-3[type=radio]:checked ~ img 
{
  height: 50px;
  width: 50px;
}

这可能会对你有所帮助。。

我编写了以下java脚本类，很好地解决了我的问题：）

function changeClass(){
var imgSize = document.getElementById("lastName").getAttribute("style");

var table;
if(document.getElementById('radio_firstname_lastname').checked == true) {
    table = document.getElementById('table_firstname_lastname');
} else {
    table = document.getElementById('table_lastname_firstname');
} 

if(document.getElementById('ImgSizeSmall').checked == true) {
    for (var r = 1; r < table.rows.length; r++) {
        var x = table.rows[r].cells.item(0);
        x.getElementsByTagName('img')[0].style.width="75px";
    }
} else if(document.getElementById('ImgSizeMedium').checked == true) {
    for (var r = 1; r < table.rows.length; r++) {
        var x = table.rows[r].cells.item(0);
        x.getElementsByTagName('img')[0].style.width="100px";
    }
}  else if(document.getElementById('ImgSizeLarge').checked == true) {
    for (var r = 1; r < table.rows.length; r++) {
        var x = table.rows[r].cells.item(0);
        x.getElementsByTagName('img')[0].style.width="150px";
    }
}

}

相关文章：