如何更改< td>的CSS样式?基于某些类? [英] How can I change CSS style of a <td> based on certain class?

查看:89
本文介绍了如何更改< td>的CSS样式?基于某些类?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

<table>
<tr>
<td class="test">
   <div>
       <div class="halo">

       </div>
   </div>
</td>
<td class="test">
   <div>
       <div class="hai">

       </div>
   </div>
</td>
</tr>
</table>




$ b如果div类是晕的话,$ bi喜欢将tdtest的css类更改为done。



我尝试了什么:





i like to change css class of td "test" to "done" if div class is halo.

What I have tried:

<table>
<tr>
<td class="test">
   <div>
       <div class="halo">

       </div>
   </div>
</td>
<td class="test">
   <div>
       <div class="hai">

       </div>
   </div>
</td>
</tr>
</table>

推荐答案

你可以做点什么像这样:

You could do something like this:
<!DOCTYPE html>
<html>
	<head>
		<title>Change HTML class</title>
		
		<style>
			.test p
			{
				color:blue;
			}
			.done p
			{
				color:red;
			}
		</style>
		
		<script >
			function change_class_name() {
				var els = document.getElementsByClassName('halo');
				els[0].parentElement.parentElement.className = 'done';
			}
		</script>
	</head>

	<body onload="javascript:change_class_name()">
		<table>
			<tr>
				<td class="test">
					<div>
						<div class="halo">
							<p>Hello World</p>
						</div>
					</div>
				</td>
				<td class="test">
					<div>
						<div class="hai">
							<p>Hello World</p>
						</div>
					</div>
				</td>
			</tr>
		</table>
	</body>

</html>



当你应该打电话函数change_class_name()取决于你。


When you should call the function change_class_name() is up to you.


这篇关于如何更改&lt; td&gt;的CSS样式?基于某些类?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆