js如何更改css样式，

Posted 2023-03-25

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js如何更改css样式，相关的知识，希望对你有一定的参考价值。

我想将css设置的图片style="background:url('/Images/shuru.gif') no-repeat;"，如何在js中将图片隐藏，

JS可以使用css属性来进行样式修改，并且不仅可以修改单一属性，也可以同时修改多个属性。

案例

以下小案例使用JQuery作为演示。

前提： html页面首先必须引入JQuery，放置在body体最后的位置。例如：

html部分代码

<p>
我是一个段落，我没有背景颜色的，但是JQuery会给我增加背景颜色。
</p>
<button>
点击我，给上面段落添加黄色背景颜色。
</button>

JQuery代码

$("button").click(function()
$("p").css("background-color", "yellow");
);

修改多个属性

$("button").click(function()
$("p").css("background-color": "yellow", "font-size": "200%");
);

结论与解释：

首先使用Jquery选择器进行元素选择 - $("button")

为该元素绑定点击事件 - click

click中的匿名函数修改css属性。

在css属性的修改中，p段落有了黄色背景；多个属性修改，不但有了黄色背景而且字体是之前的两倍大小。

注意事项：

可以不用非要绑定事件，在本案例中，绑定事件是为了更好地演示Jquery如何操作css属性。

修改单一属性和多个属性的写法是有区别的，多个属性使用,属性与值之间用：分割，属性与属性之间用，分割。

参考技术A 请看以下例子：
<html>
<head>
<meta charset="utf-8">
<title>exp</title>
<style>
p
background-image:url(写你的图片url);

</style>
</head>
<body>
<p id="p"></p>
<a href="javascript:void(0);" onclick="hideImg()">点击我隐藏</a>
<a href="javascript:void(0);" onclick="showImg()">点击我显示</a>
<a href=" http://www.dadaxun.com/">达达寻</a>
</body>
</html>
<script>
function hideImg()
var p = document.getElementById("p");
p.style.backgroundImage = "";

function showImg()
var p = document.getElementById("p");
p.style.backgroundImage = "url(写你的图片url)";

</script>

达达寻 dadaxun 为你解答

如何在悬停内容之前更改样式组件[emotion.js，样式组件]

【中文标题】如何在悬停内容之前更改样式组件[emotion.js，样式组件]【英文标题】：how to change a styled component's before content on hover [emotion.js , styled components ] 【发布时间】：2021-01-24 22:46:33 【问题描述】：

在按钮悬停时我也想更改 :before 内容，我在官方文档中找不到答案我想知道这是可能的。这是我要转换为样式化组件语法的 css 选择器：

.button:hover::before

这是样式化组件：

import styled from '@emotion/styled'

export const Button =styled.button(props=>
   return`
    padding: .75rem 2rem ;
    color: #fff;
    background-color: transparent;
    border: 1px solid #000;
    position: relative;
    z-index: 1;
    transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    cursor: pointer;
    width: $props.width ? props.width:'fit-content';
    margin-top:  $props.marginTop ? props.marginTop :0rem;

    &:before
         content: '';
         position: absolute;
         z-index: -1;
         height: 100%;
         width: 100%;
         top: 0;
         left: 0;
         $props.collection?"background-color: #fff;":"background-color: var(--colorGrey);"
         transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
         transform-origin: left center;

         //I want to change style on hover 
    
    
    &:hover
      color:var(--colorGrey);
    
`)

【问题讨论】：

【参考方案1】：

只需在:hover 伪类中嵌套一个:before 伪元素。

另外，考虑使用模板文字，而不是使用道具的函数。

import styled from '@emotion/styled';

export const Button = styled.button`
  padding: 0.75rem 2rem;
  color: #fff;
  background-color: transparent;
  border: 1px solid #000;
  position: relative;
  z-index: 1;
  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  cursor: pointer;
  width: $(props) => (props.width ? props.width : 'fit-content');
  margin-top: $(props) => (props.marginTop ? props.marginTop : 0)rem;

  &:before 
    content: '';
    position: absolute;
    z-index: -1;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    $(props) => (props.collection ? 'background-color: #fff;' : 'background-color: var(--colorGrey);')
    transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transform-origin: left center;
  

  &:hover 
    color: var(--colorGrey);

    &:before 
      content: 'Hovered';
    
  
`;

【讨论】：

非常感谢。我认为这通常遵循 sass 结构对吗？为什么你说应该使用模板文字而不是函数？那么我该如何访问道具呢？ @سعيد 使用 Emotion/Styled 的主要方式是传递模板文字。函数参数用于插值。因此，仅传递一个函数参数，您就错过了模板文字的好处。请注意，在我发送给您的代码中，插值被更新以传递一个接受道具的函数。这通常是使用 Emotion/Styled 进行插值的正确方法。

以上是关于js如何更改css样式，的主要内容，如果未能解决你的问题，请参考以下文章

css 如何更改样式？

满足条件后如何更改 CSS 样式属性？ PHP、JS、CSS