javascript - 根据小中大单选按钮选择调整图像大小 : Is it possible through CSS?

Question

我有一个员工分机列表，旁边有员工姓名和员工缩略图。我需要为用户提供小中大单选按钮(或下拉)选项并相应地显示员工图像。我想知道这是否可以使用 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>

谢谢，中号

Answer 1

我记得CSS Tricks的一篇文章这导致了 Fiddeling 这个: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;
}

这可能对您有所帮助..