首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在svg中使用javascript onmouseover函数获取类名?

在SVG中使用JavaScript的onmouseover函数获取类名,可以通过以下步骤实现:

  1. 首先,确保SVG元素中的目标元素具有一个类名,以便可以在JavaScript中访问它。
  2. 在SVG文件中,使用<script>标签嵌入JavaScript代码。确保将代码放置在<svg>标签内部。
  3. 在JavaScript代码中,使用querySelectorAll方法选择具有目标类名的元素。该方法返回一个NodeList对象,其中包含所有匹配的元素。
  4. 使用addEventListener方法为每个匹配的元素添加mouseover事件监听器。在事件处理程序中,可以使用event.target属性获取当前触发事件的元素。
  5. 在事件处理程序中,可以使用getAttribute方法获取当前元素的类名。

下面是一个示例代码:

代码语言:txt
复制
<svg>
  <circle class="myCircle" cx="50" cy="50" r="40" fill="red" />
  <circle class="myCircle" cx="150" cy="50" r="40" fill="blue" />
  <circle class="myCircle" cx="250" cy="50" r="40" fill="green" />
</svg>

<script>
  const circles = document.querySelectorAll('.myCircle');
  circles.forEach(circle => {
    circle.addEventListener('mouseover', event => {
      const className = event.target.getAttribute('class');
      console.log(className);
    });
  });
</script>

在上面的示例中,我们选择了所有具有myCircle类名的圆形元素,并为每个元素添加了mouseover事件监听器。当鼠标悬停在圆形上时,会在控制台中打印出该元素的类名。

请注意,这只是一个简单的示例,你可以根据实际需求进行修改和扩展。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

何在 Go 函数获取调用者的函数名、文件、行号...

//获取的是 CallerA函数的调用者的调用栈 pc1, file1, lineNo1, ok1 := runtime.Caller(1) } 函数的返回值为调用栈标识符、带路径的完整文件...、该调用在文件的行号。...获取调用者的函数名 runtime.Caller 返回值第一个返回值是一个调用栈标识,通过它我们能拿到调用栈的函数信息 *runtime.Func,再进一步获取到调用者的函数名字,这里面会用到的函数和方法如下...下面看一个使用 runtime.Caller 和 runtime.FuncForPC 一起配合获取调用者信息的简单例子 package main import ( "fmt" "path" "...真正要实现日志门面之类的库的时候,可能是会有几层封装,想在日志里记录的调用者信息应该是业务代码打日志的位置,这时要向上回溯的层数肯定就不是 1 这么简单了,具体跳过几层要看实现的日志门面具体的封装情况

6.5K20
  • 一篇文章带你了解SVG javascript脚本

    SVG嵌入HTML页面时,可以在JavaScript使用SVG元素,可以使用JavaScript编写SVG脚本。通过编写脚本,可以修改SVG元素,设置它们的动画,或者监听形状上的鼠标事件。...当SVG嵌入到HTML页面时,可以在JavaScript使用SVG元素,就像它们是HTML元素一样。JavaScript看起来是一样的。...二、通过ID获取SVG元素的引用 可以使用document.getElementById() 函数获得对SVG形状的引用。...可以使用setAttribute()函数设置任何其他属性,包括 style属性。还可以使用getAttribute() 函数获取属性的值。...四、总结 本文基于SVG基础,介绍了SVG javascript脚本的应用。通过ID获取SVG元素的引用,通过改变属性值,改变CSSS属性每一个知识点都通过项目进行详细的讲解。

    2.8K20

    Web安全的XSS攻击详细教学,Xss-Labs靶场通关全教程(建议收藏)

    输出编码:当将用户输入的数据输出到页面时,使用适当的编码方法(HTML实体编码)来转义可能被浏览器解释为脚本的特殊字符。 3....payload如下 ">alert()<" 第三关(事件注入) 尝试使用上一关的内容进行绕过,被转义,只能想想其他办法了 在JavaScript中有一个函数onfocus...name=' 分析源码,他这里是对特殊符号进行了转义,比如 >使用<,它并没有删掉,还是存在在html标签的,也可以进行内含属性,根据他说的尝试使用...这里使用的onload事件,就是svg标签加载完成的事件,搭配上%0a即回车按钮,就比如 ?... sRc DaTa OnFocus OnmOuseOver OnMouseDoWn P  ; 发现事件名称和javascript脚本都没有被注释

    28910

    【WAF剖析】10种XSS某狗waf绕过姿势,以及思路分析

    例如,将JavaScript代码的关键字进行大小写混淆(),或者使用Unicode编码、Base64编码等方式对代码进行编码。...三、标签和事件函数变换XSS攻击主要是通过触发HTML标签的事件函数来执行恶意脚本。因此,WAF会重点识别能够触发事件函数的HTML标签和事件函数字段。...攻击者可以尝试使用其他可以执行JavaScript代码的HTML标签(, , 等)替换常用的标签,或者使用其他事件函数onerror, oninput...「利用CSS跨站」:在某些情况下,攻击者可以利用CSS的某些特性(expression())执行JavaScript代码。...「利用全局变量和函数」:JavaScript的全局变量和函数eval(), window.onload等)可以在不直接引用脚本标签的情况下执行代码,攻击者可以尝试利用这些变量和函数绕过WAF的防护

    19310

    使用这些 CSS 属性选择器来提高前端开发效率!

    它们可以使你摆脱棘手的问题,帮助你避免添加,并指出代码的一些问题。但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用。...它们可以匹配属性的任何属性,甚至字符串值,而不是像标签、或id选择器那样精确匹配。...通常这是你想要的,但如果不是,你可以做类似下面的事情: a[download]:after { content: url(download-arrow.svg); } 还可以使用不同的图标(PDF...事件元素 你可以突出显示具有JavaScript事件属性的元素,以便将它们重构到JavaScript文件。...这里我主要关注OnMouseOver属性,但是它适用于任何JavaScript事件属性。

    2.2K50

    要提升前端布局能力,这些 CSS 属性需要学习下!

    它们可以使你摆脱棘手的问题,帮助你避免添加,并指出代码的一些问题。但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用。...它们可以匹配属性的任何属性,甚至字符串值,而不是像标签、或id选择器那样精确匹配。...通常这是你想要的,但如果不是,你可以做类似下面的事情: a[download]:after { content: url(download-arrow.svg); } 还可以使用不同的图标(PDF...事件元素 你可以突出显示具有JavaScript事件属性的元素,以便将它们重构到JavaScript文件。...这里我主要关注OnMouseOver属性,但是它适用于任何JavaScript事件属性。

    1.5K30

    前端Hack之XSS攻击个人学习笔记

    如果等标记符号都被过滤/转义了,我们也可以使用标签自身的属性/事件(href,lowsrc,bgsound,backgroud,value,action,dynsrc 等)来触发 XSS, 标签: ——引自 wkend的文章《XSS小节》: https://xz.aliyun.com/t/2936 工具检测 关于 XSS 的自动检测软件有许多...对标签属性值进行转码 HTML 属性值支持 ASCII 码形式, 替换成 <img src="javascript&...Fuzz 标签未过滤事件<em>名</em> <em>如</em>其中的 onerror 即为 IMG 标签的一个事件,通常这样的事件都是以on开头,常见的有: onResume...<em>使用</em> Css 绕过 利用 Css 样式表可以执行 <em>javascript</em> 的特性,<em>如</em> Css 直接执行 <em>javascript</em>: <div style="background-image:url(javascript

    1.8K30

    干货 | 学习XSS从入门到熟悉

    一个HTML解析器作为一个状态机,它从输入流获取字符并按照转换规则转换到另一种状态。...所以在PHP使用htmlspecialchars()函数把预定义的字符转换为HTML实体,只有等到DOM树建立起来后,才会解析HTML实体,起到了XSS防护作用。...Javascript 可以识别的编码类型有: •Unicode 编码•八进制编码•十六进制编码 一般情况下我们使用Unicode编码的比较广泛,而八进制和十六进制只有在DOM环境或eval()等函数才可以用...是因为 标签属于HTML五大元素的外部元素,可以容纳文本、字符引用、CDATA段、其他元素和注释,也就是说在解析到 标签时,浏览器就开始使用一套新的标准开始解析后面的内容,直到碰到闭合标签...在一般的通用CMS下呢,为了通用模板的兼容性,许多CMS本身不会使用“同源策略”等其他手段来防护XSS漏洞,而是使用自建的过滤函数来处理,在这种情况下,一旦出现XSS漏洞,我们就可以直接获取目标的Cookie

    4.4K42

    一文了解XSS漏洞和常见payload

    反射型XSS 的JS 代码在Web 应用的参数(变量) 反射型XSS过程如下: 攻击者给目标机发送包含恶意代码的数据包,邮件、图像 目标机点击后,将请求发送给服务器 服务器没有过滤,原封不动的返回目标机...而是写进数据库或文件等可以永久保存数据的介质 存储型XSS 通常发生在留言板等地方 我们在留言板位置留言,将恶意代码写进数据库,此时,我们只完成了第一步,将恶意代码写入数据库 因为XSS 使用的JS...Firefox和Chrome能够使用的有效分隔符: 原payload 替换空格后 <svg...\[]被替换为_ alert被替换为_ 绕过方法 定义匿名函数,利用匿名函数的参数构造payload,同时使用正则表达式来绕过alert字符串的检测。...>"> "> <iframe src=javascript

    3.4K20

    前端day12-JS(WebApi)学习笔记(操作元素属性,事件介绍)

    JavaScript 能够改变页面的所有 HTML 元素 JavaScript 能够改变页面的所有 HTML 属性 JavaScript 能够改变页面的所有 CSS 样式 JavaScript 能够对页面的所有事件做出反应...其实就是对象的取值赋值语法) 设置元素属性的值:元素.属性 = 属性值 2.特点: 1.class在js是一个关键字,如果要拿到需要使用className 2.只能获取到行内样式的属性值,无法得到行外...js获取和设置这些属性的时候需要使用驼峰命名(因为-符号不符合js的命名规范) 例如:div.style.backgroundColor 3.注意点:修改需要注意会覆盖掉原本的样式,所以一般我们不会直接修改...,而是在原先的基础上加 一个,这里需要注意多个之间的空格 例如:div.className += " two";//字符串拼接添加类型,注意多个之间的空格 ...,不会执行(函数在声明的时候不会执行) b.一旦元素注册事件之后,当用户触发了这个事件的时候,浏览器会自动捕捉到这个事件,然后帮我们调用元素对象的事件处理函数 5.页面 任何元素 都可以注册 很多个事件

    1.6K00

    JavaScriptJavaScript开篇基础(4)

    3.document.getElementsByClassName(''); //根据获取集合,也就是伪数组 4.document.querySelector('选择器');//获取指定选择器的第一个元素对象...当使用 JavaScript 的 DOM 操作 修改 元素的css样式时 , 有两种主要的方法 : 行内样式操作 element.style 样式操作 element.className...使用 element.style 可以直接在 JavaScript 设置元素的 行内样式 ; 行内样式 会直接作用于该元素 , 它权重优先级比css内部样式优先级高 , 可以直接指定样式属性的值 ;...= 'blue'; element.style.width = '200px'; element.className 是一个 JavaScript 属性,用于获取或设置 HTML 元素的(class...因为可以设置,所以我们可以通过修改去修改元素属性。 <!

    9310

    2023 想进 BAT 的快来,20 道JavaScript必须要面对的面试题()

    解释如何使用 JavaScript 读取和写入文件? readFile()函数用于读取操作。...如何在 JavaScript 中将任何基数的字符串转换为整数? 在 JavaScript ,parseInt() 函数用于将字符串转换为整数。...什么是转义字符和转义()函数? 转义字符:如果要使用一些特殊字符(单引号和双引号、撇号和与号),则此字符是必需的。...JavaScript 是否有概念级范围? JavaScript 不是概念级的作用域,在任何函数声明的变量在函数内部都有作用域。 17. 如何在 JavaScript 创建通用对象?...它用于从所选元素删除焦点。此方法启动模糊事件,也可以附加到函数以在发生模糊事件时运行。 20.JavaScript 的 unshift 方法是什么? 它用于在数组的前面插入元素。

    18960
    领券