var intersectionObserver = new IntersectionObserver( function (entries) { // 如果不可见，就返回 if (entries[0].intersectionRatio <= 0) return; loadItems(10); console.log('Loaded new items'); });
/* Then style the iframe to fit in the container div with full height and width */ .responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; }
class add active
1 2 3 4 5 6 7 8 9 10 11 12 13
for (var i = 0; i < btns.length; i++) { btns[i].addEventListener("click", function() { var current = document.getElementsByClassName("active");
// If there's no active class if (current.length > 0) { current[0].className = current[0].className.replace(" active", ""); }
// Add the active class to the current/clicked button this.className += " active"; }); }
Get Element in Iframe
1 2 3
var iframe = document.getElementById("myFrame"); var elmnt = iframe.contentWindow.document.getElementsByTagName("H1")[0]; elmnt.style.display = "none";
Media Queries with JavaScrip
1 2 3 4 5 6 7 8 9 10 11
function myFunction(x) { if (x.matches) { // If media query matches document.body.style.backgroundColor = "yellow"; } else { document.body.style.backgroundColor = "pink"; } }
var x = window.matchMedia("(max-width: 700px)") myFunction(x) // Call listener function at run time x.addListener(myFunction) // Attach listener function on state changes
var starRating = new Vue({ ...StarRating, parent: this, propsData: { /* pass props here*/ } }).$mount()
starRating.$on('someEvent', (value) => { // listen to events emitted from the component }) var popup = new mapboxgl.Popup() .setDOMContent(startRating.$el)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
import InfoWindowContent from '../InfoWindowContent.vue'
// Find all features within a static bounding box var features = map.queryRenderedFeatures( [[10, 20], [30, 50]], { layers: ['my-layer-name'] } );
1 2 3 4 5 6 7
// Find all features within a bounding box around a point var width = 10; var height = 20; var features = map.queryRenderedFeatures([ [point.x - width / 2, point.y - height / 2], [point.x + width / 2, point.y + height / 2] ], { layers: ['my-layer-name'] });
1 2
// Query all rendered features from a single layer var features = map.queryRenderedFeatures({ layers: ['my-layer-name'] });
querySourceFeatures
Returns an array of GeoJSON Feature objects representing features within the specified vector tile or GeoJSON source that satisfy the query parameters.
// Find all features in one source layer in a vector source var features = map.querySourceFeatures('your-source-id', { sourceLayer: 'your-source-layer' });
updateImage
1 2 3
// If an image with the ID 'cat' already exists in the style's sprite, // replace that image with a new image, 'other-cat-icon.png'. if (map.hasImage('cat')) map.updateImage('cat', './other-cat-icon.png');
function prune(array, label) { for (var i = 0; i < array.length; ++i) { var obj = array[i]; if (obj.label === label) { // splice out 1 element starting at position i array.splice(i, 1); return true; } if (obj.children) { if (prune(obj.children, label)) { if (obj.children.length === 0) { // delete children property when empty delete obj.children;
// or, to delete this parent altogether // as a result of it having no more children // do this instead array.splice(i, 1); } return true; } } } }