首页jquer div添加iframe并设置iframe大小

jquer div添加iframe并设置iframe大小

时间: 2023-10-14 19:02:42 浏览: 89

要使用 jQuery 将 `<iframe>` 添加到 `<div>` 中并设置其大小，可以使用 `append()` 方法和 CSS 属性来完成。以下是示例代码： ```html <!DOCTYPE html> <html> <head> <title>使用 jQuery 添加 iframe 到 div 并设置大小</title> <style> #myDiv iframe { width: 500px; height: 300px; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <div id="myDiv"></div> <script> $(document).ready(function() { // 创建一个 iframe 元素 var iframe = $('<iframe>', { src: 'path/to/file.html' }); // 设置 iframe 的属性和样式 iframe.css({ width: '500px', height: '300px' }); // 将 iframe 添加到 div 中 $('#myDiv').append(iframe); }); </script> </body> </html> ``` 在上述示例中，首先引入了 jQuery 库，并在页面加载完成后执行 JavaScript 代码。在代码中，通过 `$('<iframe>')` 创建一个 jQuery 对象，并设置其 `src` 属性为要加载的 HTML 文件的路径。然后，使用 `.css()` 方法来为 iframe 设置宽度和高度，通过传入一个包含 CSS 属性和值的对象来实现。最后，使用 `$('#myDiv').append(iframe)` 将 iframe 添加到具有 id `"myDiv"` 的 `<div>` 元素中。请确保将 jQuery 库的链接替换为你所使用的版本，并将 `'path/to/file.html'` 替换为实际的文件路径。同时，你还可以根据需要调整 iframe 的宽度和高度。

阅读全文