关于html怎么样调用js文件内部自定义对象的问题？

Posted 2023-04-26

我在html页面调用了一个js文件，而js文件内部创建了一个对象，对象如下：
var modal = "<div id='modal_X' style='display:none;background:lightblue'></div>";
请问我在html页面要调用这个modal对象怎么调用，不管什么方法都行，直接调用可以，在js里面写方法然后html调用也可以， 大家帮帮忙吧 谢谢了！
不好意思 没说明白

最重要的是js文件里面的有个方法是创建一个弹出框，还有一个是关闭弹出框方法，当你点击html页面上的弹出按钮时js里面的show方法弹出框框，部分代码是
var modal = "<div id='modal_X' style='display:none;background:lightblue'></div>";
$('body').append(modal);
这样就把这个div动态添加body里面了，我就是想怎么在不点击红色叉叉（也就是框框右上角关闭按钮）的情况下按F5刷新页面，要把创建的对象remove掉，因为我页面上有四个按钮，每个按钮都是弹出框框，但是内容不一样，因为我传个参数不一样，我点击红色叉叉的时候调用的是销毁方法，就是$('#modal_X').remove() 这个可以实现，因为是在js文件内部已经写好的方法，如果我不正常点击叉叉关闭框框，而是刷新页面的话点击四个按钮任意一个弹出来的都是上一次弹出的框框内容，我就是觉得问题应该是刷新以后并没有销毁对象也就是没有$('#modal_X').remove() 效果，那怎么让刷新的时候达到$('#modal_X').remove() 的效果呢

参考技术A
两种方法：
1、对应页面需要加载对应的js的，如果对代码没要求，可以在对应的frame中
写对应的js代码，避免重复加载（不好）

2、在一个大的frame中加载一遍js，这个frame中的frame可以通过调用大frame中的方法实现功能追问

我的是一个js文件但是四个按钮可以调用，就是弹出框的效果，里面有from表单什么的，因为四个通用一个就要每次点击按钮的时候先销毁上次的对象，然后再按这次的参数创建对象，我的弹出框右上角有个小红叉可以点击，调用的是销毁方法，具体代码是$('#modal_X').remove() ,我想刷新页面也就是按F5达到和点击小红叉一样的效果，就这个意思。。。 请帮我分析下，谢谢

参考技术B document.getElementById("modal_X");得不到？//纯js
$('#modal_X'); //jquery写法，前面要# 参考技术C <script>alert(modal);</script>本回答被提问者采纳 参考技术D 不太懂 这个modal不能放在css里吗 ？ 从你的这句里我就看出他是个样式

关于HTML5如何自定义属性

HTML5新增自定义属性的特性,在HTML代码中,我们可以在标签上直接定义自定义属性,自定义属性命要以'data-'开头

<p data-hello="这是自定义属性的值">呵呵呵呵</p>

我们可以使用原生JS获取到自定义属性的值

let p = document.querySelector('p')
console.log(p.dataset.hello) //这是自定义属性的值

也可以通过jquery获取自定义属性的值

$('p').data('hello') //这是自定义属性的值

当然,也可以通过传统的方法来获取自定义属性的值

let p = document.querySelector('p')
p.getAttribute('data-hello');
p.setAttribute('data-hello','这是重新赋值')

//jquery
$('p').attr('data-hello')  //获取
$('p').attr('data-hello','设置')  //设置

参考技术A 直接像普通属性一样读写就行了。